 /**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
 @charset "UTF-8";
//  @import './theme/element-variables.scss';
//  @import '../../node_modules/@openatc/edgebase-front/src/styles/common.scss';
 @import './mixin.scss';
 // 整体背景色
 .app-wrapper1 {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: $--background-color-base;
  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
    color: $--color-primary;
  }
}
html {
  font-family: Roboto-Regular;
}
button, input, optgroup, select, textarea {
  font-family: Roboto-Regular !important;
}
body {
  .el-message {
    top: 100PX !important;
    z-index: 9999 !important;
  }
  .el-tag .el-tag--info {
    color: $--tag-info-color;
  }
  .el-icon-close {
    color: $--tag-info-color !important;
  }
}
.borderStyle {
  text-align: right;
  padding-top: 10PX;
  border-top: 1PX solid $--border-color-lighter;
  .el-button--text {
    font-size: 14PX;
  }
}
.el-notification {
  .yellowroad {
    color: #e6a23c;
    font-weight: bold;
  }
  .down {
    color: #ff1b1b;
    font-weight: bold;
  }
  .up {
    color: #67c23a;
    font-weight: bold;
  }
  .lightoff {
    color: #303133;
    font-weight: bold;
  }
  .msgTitle {
    color: $--color-text-secondary;
    padding: 5PX 0;
  }
  .msgTitles {
    color: $--color-text-secondary;
    padding: 0;
  }
  .msgTitleEventtype {
    color: $--color-text-secondary;
    margin: 0 0 5PX 0;
  }
  .msgValue {
    color: $--color-text-primary;
    // padding-left: 5px;
  }
  .msgValuetitle {
    padding-left: 3PX;
  }
}
.board-column {
  min-width: 260PX;
  max-width: 380PX;
  min-height: 100PX;
  height: auto;
  overflow: hidden;
  // background: #f0f0f0;
  border-radius: 3PX;
  border: 1PX solid $--border-color-base;
  
  .board-column-header {
    height: 50PX;
    line-height: 50PX;
    overflow: hidden;
    padding: 0 10PX;
    text-align: center;
    background: $--color-primary;
    color: #FFFFFF;
    border-radius: 3PX 3PX 0 0;
  }
  .board-table-header {
    height: 30PX;
    line-height: 32PX;
    overflow: hidden;
    text-align: center;
    padding: 0 6PX;
    margin-bottom: -10PX;
    font-size: 12PX;
    color: $--color-info;
    background-color: $--color-black;
  }
  
  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10PX solid transparent;
    min-height: 60PX;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    background-color: $--color-black;
  
    .board-item {
      cursor: pointer;
      width: 100%;
      height: 48PX;
      // margin: 5PX 0;
      // background-color: rgba(31,46,46,0.9);
      text-align: left;
      line-height: 40PX;
      padding: 1PX 1PX;
      box-sizing: border-box;
      .el-input--small .el-input__inner {
        height: 40PX;
        line-height: 40PX;
      }
    }
  }
}
.grid-content{
  font-weight: bold;;
  letter-spacing: 0px !important;
  color: $--color-text-primary !important;
}
.box-card-ws {
  font-size: 14PX !important;
  padding: 10PX 16PX !important;
  border-top: 1PX solid $--border-color-lighter !important;
  // border-bottom: 1PX solid $--border-color-lighter !important;
}
.contents {
  color: $--color-text-primary !important;
}
.model {
  color: $--color-text-secondary !important;
}
.grid-content-label {
  color: $--color-text-secondary !important;
}
.isopen {
  text-align: right;
  padding:10PX 16PX;
  display:flex;
  justify-content: space-between;
  position:sticky;
  top:0;
  z-index:999;
  background-color: $--color-white;
  color: $--color-text-primary;
  .title {
    font-weight: bold;
    font-size: 18PX;
  }
}
.el-drawer__container::-webkit-scrollbar { 
  display: none; 
}
.btnBottom {
  text-align: right; 
  padding: 5PX 0 0 0;
  // border-top: 1px solid $--border-color-lighter;
  .el-button--text {
    font-size: 14PX;
  }
}
.empty{
  text-align: center;
  color: $--color-text-regular;
  .noInfo{
    margin: 10PX 0 0 22PX;
  }
}
.openatc-navbar {
  height: auto;
  width: 100%;
  box-shadow: 0PX 0PX 11PX 0PX rgba(0, 64, 125, 0.14);
  // .el-drawer__header {
  //   // font-family: MicrosoftYaHei;
  //   font-size: 18PX;
  //   font-weight: bold;
  //   font-stretch: normal;
  //   letter-spacing: 0px;
  //   color: $--color-text-primary;
  // }
  // .el-drawer__body { 
  //   overflow: auto; 
  // }
  // .isopen {
  //   text-align: right;
  //   margin:10PX 16PX;
  //   color: $--color-text-primary;
  // }
  // .el-drawer__container::-webkit-scrollbar { 
  //   display: none; 
  // }
  // .btnBottom {
  //   text-align: right; 
  //   padding: 5PX 0 0 0;
  //   // border-top: 1px solid $--border-color-lighter;
  //   .el-button--text {
  //     font-size: 14PX;
  //   }
  // }
  // .grid-content{
  //   letter-spacing: 0px !important;
  //   color: $--color-text-primary !important;
  // }
  // .box-card {
  //   font-size: 14PX !important;
  //   padding: 10PX 16PX !important;
  //   border-top: 1PX solid $--border-color-lighter !important;
  //   border-bottom: 1PX solid $--border-color-lighter !important;
  // }
  // .contents {
  //   color: $--color-text-primary !important;
  // }
  // .model {
  //   color: $--color-text-secondary !important;
  // }
  // .grid-content-label {
  //   color: $--color-text-secondary !important;
  // }
  // .empty{
  //   text-align: center;
  //   color: $--color-text-regular;
  //   .noInfo{
  //     margin: 10PX 0 0 22PX;
  //   }
  // }
}
.appMain {
  height: 100%;
  background: $--color-white;
  // background-color: $--background-color-base;
}

// 右浮动筛选项common样式
.filter-container {
  float: right;
  margin-top: 20PX;
  margin-right: 20PX;
  max-width: calc(100% - 310PX);
  .el-form-item {
    margin-bottom: 10PX;
    button, .el-input {
      float: left;
      margin-left: 10PX;
    }
  }
  .filters {
    float: left;
    margin-left: 10PX;
    margin-bottom: 10PX;
    .add{
      padding-left: 14px;
      padding-right: 14PX;
    }
    .header-span {
      color: $--color-text-secondary;
      font-size: 14PX;
      font-weight: normal;
      font-stretch: normal;
      float: left;
      line-height: 40PX;
    } 
    .common-single-search-btn {
      padding: 0;
      width: 56PX;
      height: 40PX;
      .el-icon-search {
        font-size: 18PX;
      }
    }
  }
  .filterRight {
    overflow: hidden;
    float: right;
  }
  .el-input-group__append {
    color: #FFFFFF;
    background-color: #299BCC;
    border-color:#299BCC;
    padding: 0 10PX;
    .el-icon-search {
      font-size: 18PX;
    }
  }
}

.common-single-search-input {
  .el-input-group__append {
    color: #FFFFFF;
    background-color: #299BCC;
    border-color:#299BCC;
    padding: 0 10PX;
    .el-icon-search {
      font-size: 18PX;
    }
  }
}
  
// 整页表格 commom 样式
.onePageTable {
  background-color: $--background-color-base;
  // padding-top: 15PX;
  height: 100%;
  .commonTablePanel {
    background-color: $--color-white;
    height: 100%;
    .common-table-header {
      overflow: hidden;
    }
    .common-table-title-container {
      float:left;
      margin-top: 20PX;
      margin-left: 20PX;
    }
    .common-table-title {
      float: left;
      text-align: center;
      font-size: 16PX;
      font-weight: bold;
      // color: $--color-text-primary;
      height: 40PX;
      line-height: 40PX;
	    color: #299BCC;
      .iconfont {
        font-size: 16PX;
        color: #299BCC;
        float: left;
        margin-right: 7PX;
      }
      span {
        float: left;
      }
      .separator {
        margin-left: 12PX;
        width: 1PX;
        height: 16PX;
        color: $--border-color-light;
      }
    }
    .atc-table {
      margin: 0 20PX;
      border: solid 1PX $--border-color-lighter;
      overflow: auto;
      .el-table--group::after, .el-table--border::after, .el-table::before {
        content: '';
        z-index: 0;
      }
    }
  }
}


.common-date-popper {
  //日期选择器弹窗的快捷选项太多，被底部遮挡
  .el-picker-panel__sidebar {
    bottom: 45px;
    border-color: $--border-color-lighter;
  }
  .el-date-range-picker__time-header {
    border-color: $--border-color-lighter;
  }
  .el-picker-panel__footer {
    border-color: $--border-color-lighter;
  }
  .el-date-range-picker__content.is-left {
    border-color: $--border-color-lighter;
  }
}
.el-range-editor .el-range-input {
  background-color: $--color-white;
}

// json插件样式
.json-view-modal {
  overflow: auto;
  .json-view-container {
    background-color: $--color-white !important;
    .json-view {
      padding-left: 0.2rem !important;
      .json-item {
        padding-left: 0.2rem !important;
      }
    }
  }
}

// 路口树组件样式
.ORGIntersectionTree {
  .origintree {
    .org-node {
      color: $--color-text-primary;
    }
    .dev-node {
      color: $--color-text-regular;
    }
    .el-tree-node__content {
      height: 34PX;
    }
    .el-tree-node__content:hover {
      .dev-node {
        color: #299BCC;
      }
    }
    .el-tree-node:focus > .el-tree-node__content {
      .dev-node {
        color: #299BCC;
      }
    }
  }
  .all-operate {
    border-bottom: 1px solid $--border-color-light;
    .all-button {
      color: $--color-text-primary;
      font-weight: 400;
    }
    .all-button:hover {
      color: #299bcc;
    }
  }
}

  // 区域协调页面样式
  .main-areaOptimize {
    border: 0PX solid red;
    background-color: $--background-color-base;
    // margin-top: 15PX;
    height: 100%;
    .container {
      height: 100%;
      .side {
        height: 100%;
        background-color: $--color-white;
        border-right: 1PX solid $--border-color-lighter;
        .area-planmanu1 {
          height: calc(100% - 50PX);
          border: 0PX solid red;
          .title {
            display: flex;
            align-items: center;
            height: 30PX;
            margin-left: 15PX;
            margin-top: 20PX;
            margin-bottom: 20PX;
            border: 0PX solid red;
            color: $--color-text-primary;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            line-height: 14PX;
            letter-spacing: 0PX;
          }
          .el-menu:first {
            border: 0PX solid red;
            height: calc(100% - 140PX);
            overflow-y: auto;
            border-right: none;
          }
          /* 蒙层样式 */
          .mask {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            z-index: 97;
          }
          /* 原生按钮样式修改 */
          .btnGroup {
            // position: absolute;
            // left: 0PX;
            // bottom: 55PX;
            display: flex;
            justify-content: center;
            border: 0PX solid #dcdfe6;
            margin-bottom: 10PX;
            cursor: pointer;
            .addBtn {
              position: absolute;
              top: 5PX;
              left: 10PX;
              border: 0PX solid red;
            }
          }
          /* 提示框相关 */
          .tipContent > div{
              float: left;
          }
          .tipContent div i {
            color: $--color-primary;
            font-size: 30PX;
          }
          .tipContent .text {
            font-size: 14PX;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14PX;
            letter-spacing: 1PX;
            color: $--color-primary;
            margin-left: 7PX;
            line-height: 42PX;
          }
          .tipContent .iconfont {
            color: $--color-primary;
          }
        }
      }
      .main {
        height: 100%;
        background-color: $--color-white;
        .main-container {
          height: calc(100% - 0PX);
          width: calc(100% - 0PX);
          border-right: 1PX solid $--border-color-lighter;
          background-color: $--color-white;
          padding-left: 10PX;
          padding-top: 10PX;
          .main-content {
            border: 0PX solid yellow;
            height: 100%;
            .content-title {
              position: relative;
              width: 100%;
              height: 40PX;
              border: 0PX solid $--border-color-lighter;
              margin-top: 2PX;
              .ContentTitle {
                display: flex;
                margin: 3PX 10PX;
                .coordination-select {
                  display: flex;
                  // border: 0PX solid red;
                  .coordination-name {
                    // border: 0PX solid red; 
                    font-size: 14PX;
                    color: $--color-text-primary;
                    margin: auto;
                  }
                  .select-condition {
                    // border: 0PX solid red;
                    vertical-align: middle;
                    margin-left: 5PX;
                  }
                }
              }
            }
            .content-main1 {
              width: 100%;
              height: calc(100% - 40PX);
              position: relative;
              border: 0PX solid yellow;
              // padding-top: 15PX;
              padding-left: 10PX;
              .tabs {
                height:100%;
                width:100%;
                border: 0PX solid red;
              }
              .areaOptimize {
                // margin-top: 15PX;
                height: calc(100vh - 210PX);
                border: 0PX solid green;
                border-right: 1PX solid $--border-color-lighter;
                .el-aside {
                    height: 750PX;
                    color: $--color-text-primary;
                    background-color: $--color-white;
                }
                .el-main {
                  height: 750PX;
                  background-color: $--color-white;
                  padding: 0;
                  .content-main {
                    width: 100%;
                    // height: 80%;
                    height: calc(100vh - 103PX);
                    border: 5PX solid red;
                    margin-left: 5PX;
                    .el-aside {
                      height: calc(100vh - 103PX);
                      color: $--color-text-primary;
                      border-right: solid 1PX $--border-color-lighter;
                      background-color: $--color-white;
                    }
                    .el-main {
                      height: calc(100vh - 103PX);
                      background-color: $--background-color-base;
                      padding: 0;
                      .content {
                        // border: 1PX solid yellow;
                        .content-title {
                          width: 100%;
                          height: 20%;
                          // border: 0PX solid red;
                        }
                        .content-main {
                          width: 100%;
                          height: 80%;
                          // border: 0PX solid red;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .el-aside {
      border: 0PX solid red;
      height: 100%;
      color: $--color-text-primary;
      border-right: solid 1PX $--border-color-lighter;
      background-color: $--color-white;
    }
    .el-main:last-child {
      // border: 0PX solid red;
      // margin-top: 20PX;
      // margin-left: 20PX;
      height: 100%;
      width: calc(100% - 40PX);
      background-color: $--color-white;
      padding-left: 10PX;
      padding-top: 10PX;
    }
    .area-planmanu {
      height: 100%;
      .el-menu {
          height: calc(100vh - 250PX);
          max-height: calc(100vh - 250PX);
          overflow-y: auto;
          border-right: none;
        }
        // .el-menu-item.is-active {
        //   background: #eaeaea;
        // }
        /* 蒙层样式 */
        .mask {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.5;
          z-index: 97;
        }
        /* 原生按钮样式修改 */
        .btnGroup .operate{
          position: fixed;
          bottom: 30PX;
          left: 108PX;
          height: 40PX;
          // line-height: 40PX;
        }
        /* 提示框相关 */
        .tipContent > div{
            float: left;
        }
        .tipContent div i {
          color: $--color-primary;
          font-size: 30PX;
        }
        .tipContent .text {
            font-size: 14PX;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14PX;
            letter-spacing: 1PX;
            color: $--color-primary;
            margin-left: 7PX;
            line-height: 42PX;
        }
        .tipContent .iconfont {
          color: $--color-primary;
        }
    }
    .area-planContent {
      position: relative;
      height: 100%;
      border: 0PX solid yellow;
      .btnGroup {
          overflow: hidden;
          float: right;
          width: 240PX;
          /* width: 230PX; */
        }
        /* 蒙层样式 */
        .mask {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.5;
          z-index: 98;
        }
        .sub-title {
          display: flex;
          align-items: center;
          height: 8%;
          margin-left: 15PX;
          margin-top: 20PX;
          margin-bottom: 15PX;
          // margin-top: 10PX;
          border: 0PX solid red;
          color: $--color-text-primary;
          font-size: 14PX;
          font-weight: normal;
          font-stretch: normal;
          line-height: 14PX;
          letter-spacing: 0PX;
        }
        /* 原生按钮样式修改 */
        .btnGroup button {
            width: 70PX;
            height: 40PX;
            padding: 0;
            line-height: 40PX;
            border: 1PX solid #dcdfe6;
            white-space: nowrap;
            outline: 0;
            transition: .1s;
            font-size: 14PX;
            border-radius: 4PX;
            color: $--button-primary-font-color;
            background-color: $--color-primary;
            border-color: $--color-primary;
            cursor: pointer;
        }
        // .btnGroup button:hover {
        //     color: $--color-white;
        //     background-color: #66b1ff;
        //     border-color: #66b1ff;
        // }
        .btnGroup button:hover {
            color: $--button-primary-font-color;
            background-color: $--color-primary;
            border-color: $--color-primary;
            opacity: 0.8;
        }
        .btnGroup > button {
          float: left;
          position: relative;
          z-index: 10;
        }
        .btnGroup button {
          height: 32PX;
          line-height: 32PX;
        }
        .btnGroup .editbtn{
            float: left;
            position: relative;
            /* z-index: 98; */
            margin-left: 10PX;
        }
        .btnGroup .editbtn button {
          font-weight: 500;
        }
        /* 提示框相关 */
        .tipContent > div{
            float: left;
        }
        .tipContent div i {
          color: $--color-primary;
          font-size: 30PX;
        }
        .tipContent .text {
            font-size: 14PX;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14PX;
            letter-spacing: 1PX;
            color: red;
            margin-left: 7PX;
            line-height: 42PX;
        }
    }
  }
 // 主页样式
 .system-status-pop-content {
   padding: 5pX 11px;
   .tittle {
    font-size: 14px;
    // font-family: Source Han Sans CN;
    font-family: digital-7;
    font-weight: bold;
    color: $--color-text-primary;
    line-height: 14px;
    margin-bottom: 8px;
   }
   .detail {
     .detail-item {
       overflow: hidden;
       font-size: 14px;
       >span {
         float: left;
         margin-top: 14px;
       }
      .label {
        // max-width: 180px;
        margin-right: 26px;
        color: $--color-text-regular;
      }
      .content {
        color: $--color-text-primary;
      }
     }
   }
 }
 .homeLayout, .homeLayouts {
    padding: 18px;
    background-color: $--background-color-base;
    height: calc(100vh - 53PX);
    .panel {
      height: 164px;
      // margin-top: 18px;
      margin-bottom: 16px;
      // height: calc(19% - 19PX);
      .crossStatusNum {
        height: 100%;
        .status-type {
          height: 100%;
          padding: 24px 0px;
          box-sizing: border-box;
          // .el-row, .el-col {
          //   height: 190px;
          // }
          .tpye-item {
            // height: 116px;
            height: 100%;
            padding: 0 58px;
            // padding-left: 54px;
            border-radius: 10px;
            position: relative;
            .state {
              // float: left;
              font-size: 14px;
              // margin-top: 30px;
              position: absolute;
              left: 164px;
              top: 30px;
              .type {
                height: 18px;
                font-size: 18px;
                font-weight: bold;
                color: $--color-text-primary;
              }
              .compYest {
                height: 14px;
                font-size: 14px;
                font-weight: 500;
                color: $--color-text-regular;
                margin-top: 12px;
                .compnum {
                  display: inline-block;
                  min-width: 44px;
                  height: 24px;
                  background: $--color-black;
                  border-radius: 4px;
                  margin-left: 10px;
                  text-align: center;
                  line-height: 24px;
                }
              }
            }
            .num {
              float: left;
              width: 59px;
              font-size: 56px;
              font-weight: bold;
              color: $--color-text-primary;
              // margin-top: 23px;
              // margin-left: 35px;
              position: absolute;
              right: 80px;
              top: 23px;
              text-align: right;
            }
            .pointernum {
              cursor: pointer;
            }
            .Img {
              float: left;
              height: 77px;
              width: 77px;
              // background-size: 77px 77px;
              // background-repeat: no-repeat;
              // background-position:center center;
              margin-right: 32px;
              margin-top: 23px;
            }
            // .upImg {
            //   background-image: url('../../assets/home/online.png');
            //   }
            // .downImg {
            //   background-image: url('../../assets/home/offline.png');
            //   }  
            // .troubleImg {
            //   background-image: url('../../assets/home/trouble.png');
            // }
            // .interveneImg {
            //   background-image: url('../../assets/home/intervene.png');
            // } 
          }
        }
      }
    }
    .cardlayout {
      margin-right: 18px;
      width: calc(100% - 18px);
      height: 100%;
    }
    .top {
        // height: 333px;
        height: calc(48% - 82px);
        margin-bottom: 17px;
        // height: calc(38% - 19PX);
        .chart {
          height: calc(100% - 52px);
          .mode-charts-panel-en {
            .name {
              width: 235px !important;
              margin-right: 20px !important;
            }
          }
          .mode-charts-panel {
            height: 100%;
            .mode-charts {
              float: left;
              width: 95%;
              height: calc(100% - 60px);
              margin-top: 20px;
            }
            .legend {
              // float: left;
              padding-top: 10px;
              .mode-item {
                // float: left;
                // width: 50%;
                margin-bottom: 18px;
                height: 30px;
                > span {
                  float: left;
                }
                .mark {
                  float: left;
                  width: 10px;
                  height: 10px;
                  margin-top: 11px;
                  margin-right: 7px;
                }
                .name {
                  width: 120px;
                  font-size: 14px;
                  font-weight: 400;
                  color: $--color-text-regular;
                  line-height: 35px;
                  margin-right: 29px;
                  cursor: pointer;
                }
                .num {
                  font-size: 24px;
                  font-weight: bold;
                  color: $--color-text-primary;
                  line-height: 35px;
                  cursor: pointer;
                }
              }
            }
          }
        }
        .system-list {
          height: calc(100% - 52px);
          .system-status {
            height: calc(100% - 30px);
            .system-status-table {
              font-size: 14px !important;
            }
          }
        } 
      }
    .bottom {
      // height: 350px;
      height: calc(49% - 82px);
      // margin-bottom: 19PX;
      // height: calc(43% - 19PX);
      .chart {
        height: calc(100% - 52px);
        .control-charts-panel-en {
          .name {
            width: 130px !important;
          }  
        }
        .control-charts-panel {
          height: 100%;
          .control-charts {
            float: left;
            height: calc(100% - 60px);
            margin-top: 20px;
            width: 95%;
          }
          .legend {
            // width: 53%;
            // float: left;
            padding-top: 30px;
            .title {
              font-size: 16px;
              font-weight: 500;
              color: $--color-text-primary;
              margin-bottom: 30px;
            }
            .control-item {
              // float: left;
              // width: 50%;
              margin-bottom: 18px;
              height: 30px;
              > span {
                float: left;
              }
              .mark {
                float: left;
                width: 10px;
                height: 10px;
                margin-top: 11px;
                margin-right: 7px;
              }
              .name {
                width: 100px;
                font-size: 14px;
                font-weight: 400;
                color: $--color-text-regular;
                line-height: 35px;
                margin-right: 29px;
                cursor: pointer;
              }
              .num {
                font-size: 24px;
                font-weight: bold;
                color: $--color-text-primary;
                line-height: 35px;
                cursor: pointer;
              }
            }
          }
        }
      }
      .cross-abnormal-en {
        padding: 0 10px !important;
        .content {
          max-width: 160px !important;
        }
      }
      .cross-abnormal {
        width: 100%;
        padding: 0 66px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 66px;
        .abnormal-item {
          height: 48px;
          margin-bottom: 60px;
          // overflow: hidden;
          .markIcon {
            float: left;
            width: 48px;
            height: 48px;
            margin-right: 20px;
            .model-icon {
              width: 48px;
              height: 48px;
            }
          }
          .content {
            float: left;
            cursor: pointer;
            .name {
              font-size: 14px;
              font-weight: 400;
              color: $--color-text-regular;
            }
            .num {
              font-size: 24px;
              font-weight: bold;
              color: $--color-text-primary;
            }
          }
        }
      }
    }
      .el-row {
          height: 100%;
          &:last-child {
            margin-bottom: 0;
          }
      }
      .el-col {
        height: 100%;
      }
      .imagebox {
        margin: 0 auto;
        height: 100%;
      }
      .toPage {
        // width: 72px;
        font-size: 20PX;
        text-align: center;
        margin: 60px 0 0 0;
        color: $--color-text-regular;
        .iconfont {
          cursor: pointer;
        }
      }
      .icon-qianwang {
        color: $--color-primary;
        font-size: 20px;
      }
      .user-manage {
        background: url('../../assets/home/usersManage.png');
        background-repeat: no-repeat;
        background-position:center center;
      }
      .operation-record {
        background: url('../../assets/home/operateRecord.png');
        background-repeat: no-repeat;
        background-position:center center;
      }
      .animationPart {
        position: relative;
        text-align: center;
        height: 70%;
        .imgindex{
          width: 330px;
          height: 200px;
          margin-top: 80px;
        }
      }
 }
 .homeLayouts {
  .top {
    height: 49%;
  }
  .bottom {
    height: 49%;
  }
}
 .faultList {
    height: 100%;
    padding: 12px 6px;
    .total {
        // width: 554px;
        height: 54px;
        background: $--color-black;
        // margin-bottom: 24px;
        display: flex;
        align-items: center;
        position: relative;
        .Img {
          float: left;
          margin-left: 13px;
          margin-right: 6px;
          height: 30px;
          width: 30px;
          background-size: 30px 30px;
          background-repeat: no-repeat;
          background-position:center center;
          background-image: url('../../assets/home/trouble.png');
        }
        .text {
            float: left;
            font-size: 14px;
            letter-spacing: 0px;
            color: $--color-text-regular;
        }
        .num {
            // float: right;
            position: absolute;
            right: 36px;
            font-size: 32px;
            letter-spacing: 0px;
            color: $--color-text-primary;
            cursor: pointer;
        }
    }
    .title {
      overflow: hidden;
      width: 100%;
      // margin-bottom: 30px;
      > div {
        float: left;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0px;
        color: $--color-text-secondary;
      }
      .faultNum {
        float: left;
        // width: 295px;
        text-align: center;
      }
    }
    .content {
      overflow-y: auto;
      .typeName {
        float: left;
        // width: 116px;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0px;
        color: $--color-text-regular;
      }
      .list {
        float: left;
      }
    }
    .el-table thead {
      color: $--color-text-regular;
    }
}
.leftPart .chartPart .el-progress--circle .el-progress__text .content .sum {
    font-size: 66px;
    color: $--color-text-primary;
    text-align: center;
  }
.leftPart .chartPart .el-progress--circle .el-progress__text .content .text {
    font-size: 14px;
    color: $--color-text-regular;
    text-align: center;
    margin-top: 15px;
}
.devsStatePart {
    height: 100%;
    .el-row {
        height: 100%;
    }
    .el-col {
      height: 100%;
    }
    .leftPart {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // flex-wrap: wrap;
      justify-content: center;
      .chartPart {
        text-align: center;
      }
      .lengendPart {
        width: 100%;
        height: 50px;
        text-align: center;
        color: $--color-text-regular
      }
      .upLengend {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #53c776;
          border-radius: 50%;
          margin-right: 5px;
      }
      .downLengend {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: rgb(229, 233, 242);
          border-radius: 50%;
          margin-left: 32px;
          margin-right: 5px;
      }
    }
    .rightPart {
        // padding-top: 88px;
        height: 100%;
        display: flex;
        flex-direction: column;
        // flex-wrap: wrap;
        justify-content: center;
        > div {
            width: calc(100% - 50px);
            background-color: $--color-black;
            display: flex;
            align-items: center;
        }
        .stateGroup {
          overflow: hidden;
          width: 75px;
          margin: 5px auto;
        }
        .state {
          float: left;
          font-size: 14px;
          color: $--color-text-regular;
        }
        .toJump {
          cursor: pointer;
        }
        .offlinestate {
          width: 100%;
        }
        .desc {
            text-align: center;
        }
        .Img {
            height: 66px;
            width: 66px;
            background-size: 66px 66px;
            background-repeat: no-repeat;
            background-position:center center;
            margin: 0 13.5% 0 18%;
        }
        .devsUp {
            > div {
                float: left;
            }
            .upImg {
                background-image: url('../../assets/home/online.png');
            }
            .num {
                font-size: 54px;
                color: #53c776;
            }
        }
        .devsDown {
            margin-top: 46px;
            > div {
                float: left;
            }
            .downImg {
                background-image: url('../../assets/home/offline.png');
            }
            .num {
                font-size: 54px;
                color: #b9b9b9;
            }
        }
    }
}
.cardBoxs:hover {
  box-shadow: 0px 0px 16px 0px rgba(0,56,76,0.14);
  border: 2px solid #299bcc;
  cursor: pointer;
}
.cardBox, .cardBoxs {
    background-color: $--color-white;
    padding: 0 22px;
    .cardTitle {
        height: 52px;
        line-height: 52px;
        // border-bottom: 1px solid $--border-color-base;
        font-size: 18px;
        color: $--color-text-primary;
      }
  }
// gis主页
/* 针对不支持scrollbar-width属性的浏览器 */
.traffic-select-content::-webkit-scrollbar {
  width: 6PX;
}
.traffic-select-content::-moz-scrollbar {
  width: 6PX;
}
.traffic-select-content::-ms-scrollbar {
  width: 6PX;
}

.traffic-select-content::-webkit-scrollbar-thumb {
  border-radius: 3PX;
}
.leaflet-container a.leaflet-popup-close-button {
  display: none;
}
.homegis-popup {
  .crossname {
    font-size: 16PX;
    line-height: 22PX;
    color: #303133;
  }
  .content-row {
    >span {
      display: inline-block;
    }
    margin-bottom: 5PX;
  }
  .online-status {
    border: solid 1PX #17cdc2;
    font-size: 12PX;
    line-height: 12PX;
    color: #17cdc2;
    padding: 7PX 8PX;
    border-radius: 4PX;
  }
  .online-control1 {
    border: solid 1PX #ffbe2e;
    color: #ffbe2e;
  }
  .online-control2 {
    border: solid 1PX #f63434;
    color: #f63434;
  }
  .online-control3 {
    border: solid 1PX #939393;
    color: #939393;
  }
  .online-control5 {
    border: solid 1PX #299bcc;
    color: #299bcc;
  }
  .online-control10 {
    border: solid 1PX #32c14d;
    color: #32c14d;
  }

  .online-control-interrupt {
    border: solid 1PX #ff8331;
    color: #ff8331;
  }
  
  .offline-status {
    border: solid 1PX #d3d4d6;
    font-size: 12PX;
    line-height: 12PX;
    color: #909399;
    padding: 7PX 8PX;
    border-radius: 4PX;
  }
  .fault-status {
    border: solid 1PX #fbc4c4;
    font-size: 12PX;
    line-height: 12PX;
    color: #f56c6c;
    padding: 7PX 8PX;
    border-radius: 4PX;
  }
  .date {
    // border: 1PX solid red;
    font-size: 14PX;
    color: #909399;
    margin-bottom: 5PX;
  }
}
.gis-home {
  position: relative;
  .leaflet-pane .leaflet-marker-pane {
    // border: 1PX solid red;
    .leaflet-marker-icon {
      .wrap  svg {
        // border: 1PX solid green;
        pointer-events: none;
      }
    }
  }
  .gis-device-panel {
    .base-dialog {
        position: absolute;
        right: 13PX;
        top: 10PX;
        z-index: 990;
        box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      .cross-dialogs{
        width:460PX;
        margin-bottom: 0;
        .el-dialog__title {
          font-weight: bold;
        }
        .brief-title {
          width: calc(100% - 60PX);
          margin-left: 15PX;
          margin-top: -10PX;
          margin-bottom: 10PX;
          display: flex;
          justify-content: space-between;
        }
        .el-dialog__body{
          padding: 0 7PX;
          padding-bottom: 20PX;
        }
        .el-dialog__headerbtn {
          top: 10PX;
          right: 10PX;
          font-size: 24PX; 
          color: $--color-info;
        }
        .el-dialog__headerbtn:hover {
          .el-dialog__close {
            color: $--color-info;
          }
        }
        .crossDirection-display{
          zoom: 1.4 !important;
        }
        .operate {
          padding: 0 13PX 10PX 13PX;
          margin-bottom: 15PX;
          font-size: 14PX;
          border-bottom: 1px solid $--border-color-base;
          overflow: hidden;
          i {
            font-size: 14PX;
            color: $--color-text-regular;
          }
          .edit-btn {
            float: left;
            color: $--color-text-regular;
            cursor: pointer;
          }
        }
        .control-info {
          height: 30PX;
          width: 100%;
          padding: 0 15PX 10PX 15PX;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item {
            width: 40%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 10PX;
            .label {
              color: $--color-text-secondary;
            }
            .value {
              font-weight: bold;
              color: $--color-text-primary;
            }
          }
          .detail-btn {
            float: right;
            el-button {
              padding: 0
            }
            .el-button {
              padding: 0;
            }
          }
        }
        .road-box {
          .cross {
            height: 446PX;
            overflow: hidden;
            .container-main {
              background-color: $--color-white;
              padding-top: 0;
            }
            .overview-content {
              height: 510PX;
              position: relative;
              top: -40PX;
              .show-channelization {
                overflow: visible;
              }
              .channelization-base-map {
                zoom: 1.4;
                margin-top: 0;
              }
            }
          }
          .control-group {
            overflow: hidden;
            // border-right: 1px solid $--border-color-base;
            margin-top: 20PX;
            .control-btn {
              float: left;
              width: 20%;
              height: 44PX;
              text-align: center;
              cursor: pointer;
              padding-right: 2PX;
              .control-content {
                display: inline-block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0 auto;
                background-color: $--border-color-base;
                .center-box {
                  display: inline-block;
                  margin-top: 14PX;
                }
              }
              .icon-svg, .control-name {
                float: left;
              }
              .control-name {
                margin-left: 5PX;
                height: 18PX;
                line-height: 18PX;
              }
            }
          }
          .footer-btn {
            overflow: hidden;
            .execute-btn {
              float: right;
              margin-top: 20PX;
              margin-right: 15PX;
            }
          }
        }
      }
    }
    .position-update {
      .el-form-item {
        margin-bottom: 9PX;
      }
      .el-dialog__body {
        padding-bottom: 10PX;
        padding-top: 8PX;
      }
      .el-dialog__footer {
        padding: 0 20PX 20PX 0;
      }
    }
    .edge-modal {
      position: absolute;
        right: 13PX;
        top: 10PX;
        z-index: 1000;
        box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      .edge-dialogs {
        width:835PX;
        margin-bottom: 0;
        .el-dialog__title {
          font-weight: bold;
        }
        .el-dialog__headerbtn {
          top: 10PX;
          right: 10PX;
          font-size: 24PX; 
          color: $--color-info;
        }
        .el-dialog__headerbtn:hover {
          .el-dialog__close {
            color: $--color-info;
          }
        }
        .el-dialog__body{
          padding: 0 7PX;
          padding-bottom: 20PX;
          .edge-box {
            height: 785PX;
            overflow: hidden;
            .cross {
              height: 100%;
            }
            .overview-content {
              height: calc(100% - 44PX);
              .tuxing-left::-webkit-scrollbar {
                width: 6PX;
              }
              .tuxing-left::-webkit-scrollbar-thumb {
                border-radius: 3PX;
              }
              .tuxing-left {
                width: 48% !important;
                overflow-y: auto;
                overflow-x: hidden;
                .intersection-map {
                  height: 360PX !important;
                  margin-top: -20PX;
                  .crossDirection-display {
                    zoom: 1 !important;
                  }
                  // .transMiddleCrossImg {
                  //   transform: scale(0.38);
                  // }
                }
                .show-channelization {
                  zoom: 1 !important;
                  overflow: visible;
                  height: 400PX !important;
                }
                .pattern-status {
                  margin-bottom: 20PX;
                }
              }
              .tuxing-right {
                width: 50% !important;
                .scheme-config {
                  .cross-module {
                    padding-bottom: 0;
                  }
                  .right-control-part::-webkit-scrollbar {
                    width: 6PX;
                  }
                  .right-control-part::-webkit-scrollbar-thumb {
                    border-radius: 3PX;
                  }
                }
              }
            }
          }
          .operate {
            padding: 0 13PX;
            font-size: 14PX;
            border-bottom: 1px solid $--border-color-base;
            overflow: hidden;
            i {
              font-size: 14PX;
              color: $--color-text-regular;
            }
            .edit-btn {
              float: left;
              line-height: 40PX;
              color: $--color-text-regular;
              cursor: pointer;
            }
            .detail-btn {
              float: right;
            }
          }
          .container-main {
            background: $--color-white;
            .pattern-status {
              margin: unset !important;
            }
            .main-patternstatus {
              margin-top: 25PX !important;
            }
          }
        }
      }
    }
  }
  .home-search-panel {
    width: 350PX;
    height: calc(100% - 26PX);
    background-color: transparent;
    position: absolute;
    // z-index: 1000;
    top: 10PX;
    left: 10PX;
    .search-panel {
      width: 350PX;
      height: 42PX;
      margin-bottom: 10PX;
      box-shadow: 0px 2PX 0 0px rgba(0, 32, 60, 0.1);
      border-radius: 2PX;
      background: $--color-white;
      position: relative;
      z-index: 1000;
      .search-input {
        .el-input__inner {
          height: 42PX;
          line-height: 42PX;
          border: none;
        }
      }
      .shrink-button {
        float: left;
        width: 42PX;
        height: 42PX;
        border-right: 1PX solid $--border-color-light;
        position: relative;
        cursor: pointer;
        .shousuo-icon {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .search-input {
        float: left;
        width: 266PX;
      }
      .search-button {
        float: right;
        width: 42PX;
        height: 42PX;
        background-color: #299bcc;
        .el-button {
          width: 100%;
          padding: 0;
          line-height: 42PX;
          height: 42PX;
          font-size: 18PX;
        }
      }
    }
    .result-panel {
      // height: 955PX;
      height: calc(100% - 52PX);
      background: $--color-white;
      transition: all 0.5s ease-in-out;
      font-size: 14PX;
      box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      border-radius: 2PX;
      position: relative;
      z-index: 1000;
      .traffic-select-panel {
        min-height: 110PX;
        padding: 0 20PX;
        border-bottom: 4PX solid rgba(165,178,183,0.2);
        .tpye-item {
          text-align: center;
          margin-top: 20PX;
          cursor: pointer;
          .type-icon {
            width: 45PX;
            height: 45PX;
            margin-bottom: 13PX;
          }
        }
      }
      .traffic-select-content {
        max-height: calc(100% - 110PX);
        overflow: auto;
        .dev-list {
          margin: 12PX;
        }
        .route-list {
          margin: 12PX;
          .route-card-item.active {
            background-color: red;
          }
          .route-card-item {
            min-height: 70PX;
            border: solid 1PX $--border-color-lighter;
            padding: 15PX 13PX;
            padding-bottom: 8PX;
            margin-bottom: 10PX;
            cursor: pointer;
            
            .name {
              font-size: 16PX;
              line-height: 16PX;
              color: $--color-text-primary;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 220PX;
              overflow: hidden;
              font-weight: bold;
            }
            .state {
              position: relative;
              top: -5PX;
              right: 3PX;
            }
            .route-devs {
              font-size: 14PX;
              line-height: 14PX;
              float: right;
              color: $--color-text-secondary;
              .devs-num {
                font-weight: bold;
              }
              .devs-num.green {
                color: #5acd4c;
              }
              .devs-num.yellow {
                color: #e0ac24;
              }
              .devs-num.grassgreen {
                color: #37ccaa;
              }
              span {
                float: right;
              }
            }
            .devs-contents {
              .route-point {
                height: 18PX;
                font-size: 14PX;
                color: $--color-text-secondary;
                span {
                  float: left;
                }
                .devname {
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  max-width: 250PX;
                  overflow: hidden;
                }
              }
              .arrow {
                margin: 0 7PX;
                .icon-jiantou {
                  font-size: 10PX;
                  color: $--color-text-secondary;
                }
              }
            }
          }
        }
      }
    }
    .device-chart-panel {
      height: 390PX;
      background: $--color-white;
      transition: all 0.5s ease-in-out;
      font-size: 14PX;
      box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      border-radius: 2PX;
      position: relative;
      z-index: 1000;
      .content {
        // max-height: calc(100% - 110PX);
        width: 100%;
        height: 100%;
        overflow: auto;
        .top {
          height: 100PX;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          background-color: #299bcc;
          .left {
            width: 60%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: 1PX solid #6ab9db;
            gap: 10PX;
          }
          .right {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10PX;
            span {
              cursor: pointer;
            }
          }
          .text-top {
            font-size: 28PX;
            font-weight: 900;
            .green, .yellow {
              cursor: pointer;
            }
          }
          .text-bottom {
            font-size: 18PX;
            .white:first-child {
              cursor: pointer;
            }
          }
          .green {
            color: #3fff4d;
          }
          .white {
            color: #FFFFFF;
          }
          .yellow {
            color: #ffc168;
          }
        }
        .bottom {
          height: 290PX;
          width: 100%;
          // padding: 15PX;
          .content {
            width: 100%;
            height: 100%;
            // border: 1px solid green;
          }
        }
      }
    }
    .layers-control {
      width: 110PX;
      height: 42PX;
      // border: 0PX solid red;
      position: absolute;
      top: 0PX;
      left: 360PX;
      z-index: 99999;
      box-shadow: 0px 0px 7px 0px 
        rgba(0, 32, 60, 0.4);
      border-radius: 4PX;
      .layerControl {
        width: 100%;
        height: 100%;
        font-size: 14PX;
        background-color: $--color-white;
        color: $--color-text-primary;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-button {
          color: $--color-text-secondary;
        }
        .iconfont {
          color: $--color-text-secondary;
          font-size: 16PX;
        }
        .active {
          color: $--color-primary
        }
      }
    }
    
    .layers-example {
      position: fixed;
      width: 291PX;
      height: 232PX;
      // border: 0PX solid red;
      bottom: 20PX;
      right: 20PX;
      z-index: 99999;
      box-shadow: 0px 0px 7px 0px 
        rgba(0, 32, 60, 0.4);
      border-radius: 4PX;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 10PX;
      // background-color: rgba(255, 255, 255, 0.8);
      background-color: $--color-white;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        // padding: 10PX;
        // border: 0PX solid red;
        width: 100%;
        // height: 30PX;
        padding-bottom: 10PX;
        .top-left {
          font-size: 14PX;
          font-weight: 600;
          // color: $--color-text-primary;
          // border: 0PX solid red;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0PX;
          color: $--color-text-primary;
        }
        .top-right {
          font-size: 14PX;
          font-weight: 600;
          color: $--color-text-primary;
          // border: 0PX solid red;
          cursor: pointer;
        }
      }
      .center {
        width: 100%;
        height: 90PX;
        // padding-bottom: 5PX;
        // padding-top: 5PX;
        // border: 0PX solid red;
        font-size: 14PX;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .title {
          font-size: 14PX;
          display: flex;
          width: 100%;
          justify-content: flex-start;
          align-items: center;
          // border: 0PX solid red;
          font-size: 12PX;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0PX;
          // color: #606266;
          color: $--color-text-regular;
          padding-bottom: 6PX;
        }
        .content {
          // border: 0PX solid red;
          width: 100%;
          height: 100%;
          .example {
            // border: 0PX solid red;
            width: 264PX;
            height: 53PX;
            background-color: #ffffff;
            border-radius: 27PX;
            border: solid 1px #299bcc;
            background-color: $--color-white;
            color: $--tag-info-color;
            // opacity: 0.5;
            display: flex;
            .example-left {
              width: 89PX;
              height: 100%;
              border-right: 1PX solid #c5d7df;
              display: flex;
              justify-content: space-between;
              padding-left: 10PX;
              // padding-right: 5PX;
              align-items: center;
              .direction {
                width: 34PX;
                height: 26PX;
                font-family: SourceHanSansCN-Regular;
                font-size: 12PX;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0PX;
                color: $--tag-info-color;
                // border: 0PX solid red;
              }
              .countdown {
                width: 47PX;
                height: 12PX;
                font-family: SourceHanSansCN-Regular;
                font-size: 12PX;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0PX;
                color: $--tag-info-color;
                // border: 0PX solid red;
              }
            }
            .example-right {
              width: calc(100% - 89PX);
              height: 100%;
              // border: 0PX solid red;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              padding: 8PX;
              gap: 8PX;
              .right-top {
                // width: 47PX;
                width: 100%;
                // border: 0PX solid red;
                height: 12PX;
                // font-family: SourceHanSansCN-Regular;
                font-size: 12PX;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0PX;
                color: $--tag-info-color;
                // border: 0PX solid red;
                display: flex;
                justify-content: space-between;
                // padding: 12PX;
              }
              .right-bottom {
                width: 100%;
                // border: 0PX solid red;
                display: flex;
                justify-content: space-between;
                font-size: 12PX;
                color: $--color-primary;
              }
            }
          }
        }
      }
      .layer-example-bottom {
        width: 100%;
        height: 100%;
        height: 110PX;
        border: 0PX solid red;
        .layer-example-title {
          font-size: 12PX;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border: 0PX solid red;
          color: $--color-text-regular;
        }
        .layer-example-content {
          border: 0PX solid red;
          display: flex;
          justify-content: flex-start;
          padding: 5PX;
          .left {
            width: 66%;
            height: 100%;
            border: 0PX solid red;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 2PX;
            .list-icon {
              width: 49%;
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img {
                width: 40%;
                height: 100%;
                // zoom: 0.9;
                // border: 1PX solid red;
              }
              .text{
                width: 50PX;
                margin-left: -5PX;
                font-size: 12PX;
                height: 100%;
                border: 0PX solid red;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: $--color-text-primary;
              }
            }
          }
          .right {
            width: 33%;
            border: 0PX solid red;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            border-left: 1PX solid #eeeeee;;
            gap: 2PX;
            .list-icon {
              width: 100%;
              // height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                width: 40%;
                height: 100%;
                // border: 1PX solid red;
                // zoom: 0.9;
              }
              .text{
                width: 50PX;
                margin-left: -24PX;
                font-size: 12PX;
                height: 100%;
                border: 0PX solid red;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-left: 20PX;
                gap: 2PX;
                color: $--color-text-primary;
              }
            }
          }
        }
      }
    }
    
    // shrink
    .shrink {
      height: 30PX !important;
      overflow: hidden;
    }
  }  
  .slide-enter-active, .slide-leave-active {
    transition: opacity 1s
  }
  .slide-enter, .slide-leave-active {
    opacity: 0
  }
  
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to{
    transform: translateX(10px);
    opacity: 0;
  }
}
.duty-panel {
  width: 360PX;
  height: calc(100% - 26PX);
  position: absolute;
  top: 10PX;
  right: 10PX;
  z-index: 1000;
  background-color: $--color-white;
  box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
  border-radius: 2PX;
}
.route-panel {
  width: 720PX;
  // height: calc(100% - 26PX - 224PX);
  height: 600PX;
  position: absolute;
  top: 10PX;
  right: 10PX;
  z-index: 1000;
  background-color: $--color-white;
  box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
  border-radius: 2PX;
}
// GIS页面样式
.gis-devicePanel {
  height: 100%;
  .filters {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    // margin-right: 10px;
  }
  .devicePanel {
    border: solid 1px $--border-color-lighter;
    height: 100%;
    .el-pagination {
      // white-space: inherit;
      overflow: hidden;
    }
  }
  .addbtn {
    padding: 0;
    width: 12.5%;
    height: 40px;
    text-align: center;
    float: right;
    line-height: 40px;
    min-width: 66px;
    margin-bottom: 7px;
  }
  .el-table thead {
    color: $--color-text-regular;
  }
  .el-dialog__body {
    padding: 30PX 72Px 30PX 0;
    .el-form-item {
      margin-bottom: 10PX;
    }
  }
  .el-dialog__footer {
    padding: 10PX 72PX 38PX 0;
  }
}
// GIS页面样式
.leaflet-container {
  font-size: 12px;
  line-height: 1.5;
}
@media only screen and (max-width: 1390px){
  .openatc-gis {
    height: calc(100vh - 93PX) !important;
  }
 }
 @media only screen and (max-width: 1342px){
  .openatc-gis {
    height: calc(100vh - 105PX) !important;
  }
 }
@media only screen and (max-width: 1142px){
  .openatc-gis {
    height: calc(100vh - 150PX) !important;
  }
 }
 @media only screen and (max-width: 1094px){
  .openatc-gis {
    height: calc(100vh - 157PX) !important;
  }
 }


@media (max-height: 1000px) {
  .edge-box {
    height: calc(100vh - 157PX - 80PX) !important;
  }
}

.openatc-gis {
  height: calc(100vh - 53PX);
  position: relative;
  .tools {
    position:absolute;
    top:10PX;
    left:485PX;
    z-index:999;
    padding: 0 10PX;
    // width: 100%;
    height: 42PX;
    font-size: 16PX;
    background-color: $--color-white;
    color: $--color-text-primary;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    .el-button {
      color: $--color-text-secondary !important;
    }
  }
  .base-dialog{
    .my-dialogs{
      .el-dialog__body{
        padding: unset;
      }
      position: fixed;
      left: 20PX;
      top: -30PX;
      height: 330PX;
      width:420PX;
      .intersection-map .crossDirection-display{
        zoom: 0.7 !important;
      }
    }
  }
  .header {
    position: fixed;
    top: 70px;
    left: 35%;
    width: 280px;
    height: 40px;
    z-index: 904;
    line-height: 35px;
    font-size: 30px;
    background-color: $--color-white;
    text-indent: -5px;
    text-align: center;
  }
  /deep/ .el-radio__input {
      display: none;
  }
  .header-left {
    position: absolute;
    top: 20PX;
    left: 2%;
    width: 180PX;
    height: 40PX;
    z-index: 904;
    line-height: 35PX;
    font-size: 30PX;
    text-indent: -5PX;
    text-align: center;
    .layerControl {
      width: 29%;
      height: 40PX;
      font-size: 14PX;
      float:left;
      background-color: $--color-white;
      color: $--color-text-primary;
    }
    .layerDetail {
      width: 70%;
      float:right;
      background-color: $--color-white;
    }
  }
  // .footer-left {
  //   position: absolute;
  //   bottom: 1rem;
  //   left: 3.3rem;
  //   z-index: 903;
  //   width: auto;
  //   height: auto;
  //   line-height: 1.1rem;
  //   background-color: $--color-white;
  //   border-radius: 0.1rem;
  //   text-align: center;
  //   user-select: none;
  //   font-size: 0.6rem;
  //   color: $--color-text-primary;
  // }
  .footer-right {
    min-width: 240PX;
    // height: 16px;
    line-height: 16PX;
    // background-color: $--color-white;
    background-color: transparent;
    border-radius: 6PX;
    text-align: center;
    user-select: none;
    position: absolute;
    bottom: 16PX;
    right: 0PX;
    z-index: 903;
    font-size: 10PX;
    color: $--color-text-primary;
    padding: 5PX 0PX;
  }
  .addbtn {
    position: absolute;
    right: 5px;
    /* z-index: 99; */
    top: 7px;
    width: auto;
    height: auto;
  }
  .addicon {
    color: #42daff;
    font-size: 26px;
  }
  .addicon:hover {
    color: rgb(32, 163, 195);
  }
  .toggle_show {
    position: absolute;
    cursor: pointer;
    right: 17PX;
    top: 20PX;
    z-index:904;
  }
  .active {
    position: absolute;
    cursor: pointer;
    right: 17PX;
    top: 20PX;
    z-index:100001;
  }
  .init-toggle {
    position: absolute;
    cursor: pointer;
    right: 440px;
    top: 0px;
  }
  .slide-enter-active {
    transition: all 0.5s linear;
  }
  .slide-leave-active {
    transition: all 0.5s linear;
  }
  .slide-enter {
    transform: translateX(100%);
    opacity: 0;
  }
  .slide-leave-to {
    transform: translateX(100%);
    opacity: 0;
  }
  .route-info {
    position: relative;
    float: left;
    margin-top: -10px;
    margin-left: -220px;
    width: 200px;
    border-radius: 20px;
  }
  .route-length {
    top: 70px;
    right: 500px;
    height: 80px;
    background-color: $--color-white;
    box-shadow: 0px 0px 7px 0px 
      rgba(0, 32, 60, 0.12);
    border: solid 1px $--border-color-base;
  }
  .route-length-name {
    float: left;
    margin-top: 5px;
    margin-left: 12px;
    height: 14px;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: $--color-text-secondary;
  }
  .route-length-value {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    height: 25px;
    font-size: 30PX;
    font-weight: bold;
    font-style: italic;
    font-stretch: normal;
    line-height: 35px;
    letter-spacing: 0px;
    color: $--color-primary;
  }
  .route-length-company {
    float: left;
    margin-top: 23px;
    font-style: italic;
    font-size: 14PX;
    font-weight: bold;
    letter-spacing: 0px;
    color: $--color-primary;
  }
  // .showLayouts {
  //   position: fixed;
  //   top: 70PX;
  //   right: 38PX;
  //   width: 470px;
  //   height: auto;
  //   // z-index: 905;
  //   // background-color: $--color-white;
  // }
  .showLayout {
    position: absolute;
    top: 20PX;
    right: 38PX;
    width: 470px;
    height: auto;
    z-index: 905;
    background-color: $--color-white;
    .tabsconatiner {
      height: 100%;
    }
  }
  .icon-choose {
    color: $--color-text-secondary;
    margin: -12PX 0;
  }
  .el-icon-location {
    color: $--color-primary;
  }
  .current-button-click {
    color: $--color-primary;
  }
  .leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 6px;
  }
  .leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 40px;
  }
}
//gis device tab
.gis-devicePanel {
  .devicePanel .el-table td,
  .el-table th {
    padding: 3px 0;
  }
  .deviceTable .el-table__row {
    cursor: pointer;
  }
  .el-table .warning-row {
    background: $--color-text-primary;
  }
  .el-table .success-row {
    background: $--color-text-primary;
  }
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6PX; // 横向滚动条
    height: 6PX; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
  }
  .title {
    margin: 0 0 15px 0 ;
    color: #fff;
  }
  .device-update {
    .dev-update .el-dialog__body {
      padding: 30px 72px 30px 0;
    }
    .el-dialog__footer {
      padding: 10px 72px 38px 0;
    }
    // 自定义校验规则的labal加上*号
    .dev-update .ipLabel .el-form-item__label:before,
    .dev-update .portLabel .el-form-item__label:before {
      content: "*";
      color: #f56c6c;
      margin-right: 4px;
    }
  }
}
// terminalLock
.terminal-lock-container {
  width: 100%;
  height: 100%;
  background-color: $--color-white;
  box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
  border-radius: 2PX;
  border: solid 1px $--border-color-base;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .terminal-header {
    // position: relative;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 40PX;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    .title {
      // margin: 0 0 15px 0 ;
      color: $--color-text-primary;
      width: 40%;
      height: 100%;
      // border: solid 1px red;
      font-family: SourceHanSansCN-Medium;
      font-size: 18PX;
      font-weight: bold;
      font-stretch: normal;
      line-height: 22PX;
      letter-spacing: 0PX;
      display: flex;
      justify-content: flex-start;
      padding: 20PX 0PX 10PX 20PX; 
      // color: #303133;
      .platform {
        font-size: 14PX;
        font-weight: normal;
        color: $--color-text-secondary;
        margin-left: 10PX;
      }
    }
    .switch {
      width: 60%;
      height: 70%;
      margin-top: 10PX;
      margin-right: 20PX;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 5PX;
      padding-left: 15PX;
      // border: solid 1px red;
      // border-left: 1PX solid $--border-color-base;
      color: $--tag-info-color;
      .btn-next {
        margin-left: 20PX;
        margin-right: 20PX;
      }
      .iconfont {
        font-size: 14PX;
        color: $--tag-info-color;
        padding-right: 5PX;
      }
      .el-button--text {
        color: $--tag-info-color;
      }
      .el-button:hover {
        color: $--color-primary;
        .iconfont {
          color: $--color-primary;
        }
        .el-button--text {
          color: $--color-primary;
        }
      }
      .btn-current {
        color: $--color-primary;
        .iconfont {
          color: $--color-primary;
        }
        .el-button--text {
          color: $--color-primary;
        }
      }
      .btn-gray {
        color: $--color-text-secondary;
        .iconfont {
          color: $--color-text-secondary;
        }
        .el-button--text {
          color: $--color-text-secondary;
        }
      }
    }
    .ext {
      border-left: 0PX solid $--border-color-base;
    }
    .close {
      // border: solid 1px red;
      cursor: pointer;
      font-size: 24PX;
      width: auto;
      height: auto;
      padding: 10PX 10PX 0 0;
      // margin: 5PX 5PX 0 0;
      // margin: -20PX -5PX 0 0;
      color: $--color-info;
    }
  }
  .content {
    position: relative;
    left: 0;
    width: 100%;
    height: calc(100% - 40PX);
    background-color: $--color-white;
    // border: 1px solid green;
    .content-config {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .params {
        width: 100%;
        height: auto;
        // border: 1px solid red;
        padding-top: 15PX;
        padding-bottom: 15PX;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        .param {
          width: 200PX;
          height: 40PX;
          // border: 1px solid red;
          padding: 5PX;
          display: flex;
          flex-grow: 1;
          justify-content: flex-start;
          align-items: center;
          .label {
            width: 85PX;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 10PX;
            font-size: 14PX;
            color: $--color-text-primary;
          }
          .value {
            width: 100PX;
            font-size: 14PX;
            justify-content: flex-end;
            justify-content: center;
            align-items: center;
            .el-input--mini {
              font-size: 14PX;
            }
            .el-input-number {
              .el-input__inner {
                text-align: left;
              }
            }
          }
        }
      }
      .info {
        width: 100%;
        height: 20PX;
        // border: 1px solid red;
        color: $--color-text-regular;
        padding-left: 20PX;
        font-size: 14PX;
      }
      .main {
        width: 530PX;
        height: 530PX;
        padding: 10PX;
        // border: 1px solid red;
        background-color: $--color-white;
        // overflow: hidden;
        .intersection-map {
          background: #1e90c106;
          .crossDirection-display {
            zoom: 1.0 !important;
            margin-top: -100PX;
          }
        }
      }
      .bottom {
        width: 100%;
        height: auto;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 10PX 20PX 20PX 0;
      }
      .intersection-direction-selection {
        height: 100%;
      }
    }
    .content-exec {
      width: 100%;
      height: 800PX;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .openatc-scheme-config {
        width: 100%;
        height: 100%;
      }
    }
    .videos {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid green;
      .intersection-map {
        .middleCrossImg2 {
          zoom: 1.1 !important;
        }
        .superminiCrossImg {
          zoom: 1.1 !important;
        }
        .smallCrossImg {
          zoom: 1.1 !important;
        }
      }
      
      .top-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-136%, -165%);
        width: 400PX;
        height: 240PX;
        // border: 1PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .top-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(36%, -165%);
        width: 400PX;
        height: 240PX;
        // border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-136%, 60%);
        width: 400PX;
        height: 240PX;
        // border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(36%, 60%);
        width: 400PX;
        height: 240PX;
        // border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .top-left, .top-right, .bottom-left, .bottom-right {
        .el-button {
          display: none; /* Initially hidden */
          z-index: 9998;
        }
      }
      .top-left:hover, .bottom-left:hover {
        .el-button {
          display: block; /* Show on hover */
          position: relative;
          top: 45%;
          left: 50%;
        }
      }
      .top-right:hover, .bottom-right:hover {
        .el-button {
          display: block; /* Show on hover */
          position: relative;
          top: 45%;
          left: 30%;
        }
      }
      .flvlist {
        // height: 350PX;
        height: 426PX;
      }
    }
  }
}
//gis dutyroute tab
.gis-duteRoute {
  width: 100%;
	height: 100%;
  position: relative;
	// border: solid 1px black;
  // border: solid 1px $--border-color-base;
  background-color: $--color-white;
  overflow-y: clip;
  overflow-x: visible;
  // .el-button--small {
  //   font-size: 14PX;
  //   padding: 6PX 12PX;
  // }
  .zoom-left {
    position: absolute;
    right: 360PX;
    width: 560PX;
    // border: 0PX solid red;
    height: auto;
    border-radius: 2PX;
    box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
  }
  .zoom-left-scroll {
    height: calc(100% - 26PX);
    border-radius: 2PX;
    box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
    .content-config {
      overflow-y: scroll;
    }
  }
  .zoom-play {
    right: 360PX;
    width: 1560PX;
    // width: calc(100% - 360PX);
    height: auto;
    // min-height: 350PX;
    .content {
      padding: 10PX;
    }
  }
  // 2K
  .zoom-large {
    right: 360PX;
    width: 2200PX;
    border: 0PX solid red;
    height: auto;
    .intersection-map .largeCrossImg  {
      zoom: 1.6 !important;
    }
    .videos {
      .top-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-134%, -192%);
        width: 600PX;
        height: 300PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .top-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(34%, -192%);
        width: 600PX;
        height: 300PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-134%, 68%);
        width: 600PX;
        height: 300PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(34%, 68%);
        width: 600PX;
        height: 300PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
    }
  }
  // mini
  .zoom-mini {
    right: 360PX;
    width: 1060PX;
    border: 0PX solid red;
    height: auto;
    .intersection-map .miniCrossImg {
      zoom: 0.9 !important;
    }
    .videos {
      .top-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-132%, -133%);
        width: 320PX;
        height: 240PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .top-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(32%, -133%);
        width: 320PX;
        height: 240PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-left {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-132%, 42%);
        width: 320PX;
        height: 240PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
      .bottom-right {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(32%, 42%);
        width: 320PX;
        height: 240PX;
        border: 0PX solid red;
        // background-color: red;
        z-index: 9999;
      }
    }
  }
  .route-header {
    height: 50PX;
    display: flex;
    justify-content: space-between;
    // border: solid 1px red;
    // align-items: center;
    color: $--color-text-regular;
    .title {
      // margin: 0 0 15px 0 ;
      color: $--color-text-primary;
      width: 95%;
      height: 100%;
      padding: 20PX 0PX 0PX 20PX;
      // border: solid 1px red;
      font-family: SourceHanSansCN-Medium;
      font-size: 18PX;
      font-weight: bold;
      font-stretch: normal;
      line-height: 22PX;
      letter-spacing: 0PX;
      // color: #303133;
    }
    .close {
      cursor: pointer;
      font-size: 24PX;
      width: auto;
      height: auto;
      // border: solid 1px red;
      // background-color: #909399;
      // display: flex;
      // justify-content: flex-end;
      // align-items: flex-start;
      padding: 10PX 10PX 0 0;
      color: $--color-info;
    }
  }
  .batch-control {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border: solid 1px red;
    padding: 0 20PX;
    .dev-count {
      width: 40%;
      height: 30PX;
      font-size: 14PX;
      display: flex;
      align-items: center;
      // border-bottom: solid 1px $--border-color-base;
      .count {
        color: #ebab00;
        margin-right: 5PX;
        font-weight: bold;
      }
      .text {
        color: $--color-text-secondary;
      }
    }
    .control {
      width: 60%;
      height: 30PX;
      display: flex;
      justify-content: flex-end;
      // border-bottom: solid 1px $--border-color-base;
      .btn {
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .btn-icon {
          width: 15PX;
          height: 14PX;
          font-size: 14PX;
          margin-right: 3PX;
          .iconfont {
            font-size: 14PX;
            color: #299bcc;
          }
          .btn-text {
            width: 60%;
            height: 14PX;
            font-size: 14PX;
            font-family: SourceHanSansCN-Regular;
            font-size: 14PX;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14PX;
            letter-spacing: 0PX;
            color: #299bcc;
            .el-button {
              font-size: 14PX;
              // padding: 6PX 12PX;
            }
          }
        }
      }
    }
  }
  .additional-info {
    width: 100%;
    padding: 0 20PX;
    .update-time {
      height: 30PX;
      line-height: 28PX;
      border-bottom: solid 1px $--border-color-base;
      color: $--color-text-secondary;
      font-size: 14PX;
    }
    
  }
  .intersectin-with-pattern { 
    width: 100%;
    height: 100%;
    // border: 1px solid green;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .intersection-container {
      // background-color: #1e90c106;
      overflow: hidden;
      // border:1px solid red;
      width: 340PX;
      height: 340PX;
    }
    .pattern-container {
      width: 100%;
      height: 100PX;
      padding: 0 10PX;
      // border:1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
    }
    .btn-bottom {
      float: right;
      margin-top: -5px;
      margin-right: 15px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .grid-content-label {
      color: $--color-text-secondary;
    }
  }
  .devicePanel {
    width: 100%;
    height: calc(100% - 80PX);
    .block {
      height: 100%;
      max-height: calc(100% - 10PX);
      // border: 1px solid green;
      .resttime {
        font-size: 14PX;
        color: $--color-text-secondary;
        padding: 5PX 20PX 5PX 15PX;
        margin-top: 5PX;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          width: 70%;
          // border: 1px solid green;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .index {
          width: 20PX;
          height: 20PX;
          background: #299bcc;
          border-radius: 10PX;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -5PX;
          margin-right: 5PX;
        }
        .name {
          font-size: 16PX;
          color: $--color-text-primary;
          font-weight: bold;
        }
        .btn {
          width: 30%;
          // border: 1px solid red;
          color: $--color-primary;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 5PX;
          .btn-icon {
            cursor: pointer;
            // width: 15PX;
            height: 14PX;
            font-size: 14PX;
            // margin-right: 10PX;
            // margin-left: 5PX;
            .iconfont {
              width: 16PX;
              height: 16PX;
              font-size: 14PX;
              color: #909399;
            }
            .iconfont:hover {
              color: #299bcc;
            }
          }
        }
        .state {
          width: 100%;
          height: 17PX;
          display: flex;
          justify-content: space-around;
          align-items: center;
          // border: 1px solid red;
          padding-left: 20PX;
          padding-right: 10PX;
          .content {
            width: 50%;
            // border: 1px solid red;
            // padding-left: 5PX;
            margin-right: 40PX;
            display: flex;
            flex-shrink: 0;
            justify-content: flex-start; 
            align-items: center;
            .time {    
              width: auto;
              margin-right: 5PX;
              // border: 1px solid red;
              display: flex;
              justify-content: flex-start; 
              align-items: center;
              .el-tag {
                margin: 0 5PX;
              }
            }
          }
          .exec {
            width: 40%;
            // height: 100%;
            display: flex;
            flex-shrink: 0;
            // border: 1px solid red;
            justify-content: flex-end;
            align-items: center;
            .btns {
              margin-left: 5PX;
            }
          }
        }
      }
      .card-container {
        /* width: 305PX; */
        // height: 410PX;
        // height: auto;
        // padding: 5PX 10PX 5PX 25PX;
        margin-top: 10PX;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        /* width: 100%; */
        .intersectin-with-pattern {
          .intersection-map {
            background: #1e90c106;
            .crossDirection-display {
              zoom: 1.6 !important;
              margin-top: -24PX;
            }
          }
        }
      }
      .card-container2 {
        width: 360PX; 
        height: 360PX;
        // height: auto;
        padding: 10PX;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        .intersection-direction-selection {
          width: 100%;
          height: 100%;
          .intersection-map {
            background: #1e90c106;
            .crossDirection-display {
              zoom: 1.6 !important;
              margin-top: -24PX;
            }
          }
        }
      }
    }
  }
}
//gis coordination tab
.gis-planchart {
  width: 720PX;
  height: 600PX;
  // border: 1px solid red;
  // display: flex;
  .route-header {
    height: 60PX;
    display: flex;
    justify-content: space-between;
    // border: solid 1px red;
    // align-items: center;
    color: $--color-text-regular;
    .title {
      // margin: 0 0 15px 0 ;
      color: $--color-text-primary;
      width: 95%;
      height: 100%;
      padding: 20PX 0PX 0PX 20PX;
      // border: solid 1px red;
      font-family: SourceHanSansCN-Medium;
      font-size: 18PX;
      font-weight: bold;
      font-stretch: normal;
      line-height: 22PX;
      letter-spacing: 0PX;
      // color: #303133;
    }
    .close {
      cursor: pointer;
      font-size: 24PX;
      width: auto;
      height: auto;
      // border: solid 1px red;
      // background-color: #909399;
      // display: flex;
      // justify-content: flex-end;
      // align-items: flex-start;
      padding: 10PX 10PX 0 0;
      color: $--color-info;
    }
  }
  .greenWave {
    width: calc(100% - 40PX);
    height: 80PX;
    // border: 1px solid red;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    gap: 10PX;
    margin: 0 20PX;
    padding: 0 10PX;
    background-color: $--background-color-base;
    .item {
      width: auto;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .dir-text {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24PX;
        // border: 1px solid red;
        color: $--color-text-primary;
      }
      .num {
        width: 100%;
        height: 55%;
        font-size: 24PX;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 3PX;
        color: $--color-text-primary;
      }
      .text {
        width: 100%;
        height: 45%;
        font-size: 14PX;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 3PX;
        color: $--color-text-secondary;
      }
    }
    .item-line {
      height: calc(100% - 4PX);
      margin: 2PX 0;
      width: 1PX;
      background-color: $--border-color-base;
    }
  }
  .line {
    width: calc(100% - 40PX);
    height: 1PX;
    margin: 10PX 20PX;
    background-color: $--border-color-base;
  }
  .direction {
    width: 100%;
    height: 40PX;
    // border: 1px solid yellow;
    display: flex;
    justify-content: space-between;
    padding: 0 20PX 0 20PX;
    .planchart-name {
      font-size: 16PX;
      font-weight: bold;
      font-stretch: normal;
      line-height: 35px;
      letter-spacing: 0px;
      color: $--color-text-primary;
      // border: 0PX solid red;
    }
    .direction-icon {
      width: 60%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      // border: 0PX solid red;
      cursor: pointer;
      gap: 20PX;
      .item {
        width: auto;
        height: 100%;
        // border: 1px solid green;
        display: flex;
        flex-shrink: 0;
        .label {
          width: auto;
          height: 100%;
          color: $--color-text-secondary;
          // border: 1px solid red;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-right: 5PX;
          .line-up {
            width: 30PX;
            height: 10PX;
            background-color: #7bcb9b;
          }
          .line-up-selected {
            width: 30PX;
            height: 10PX;
            background-color: rgba(123, 203, 155, 0.4);
          }
          .line-down {
            width: 30PX;
            height: 10PX;
            background-color: #7bc7fd;
          }
          .line-down-selected {
            width: 30PX;
            height: 10PX;
            background-color: rgba(123, 199, 253, 0.4);
          }
        }
        .value {
          width: auto;
          height: 100%;
          color: $--color-text-primary;
          font-weight: bold;
          // border: 1px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 14PX;
        }
        .icon-jiantou {
          padding-left: 2PX;
          font-size: 10PX;
        }
      }
    }
  }
  .params {
    width: 100%;
    height: 60PX;
    // border: 1px solid red;
    // border: 1px solid red;
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 0 20PX 0 20PX;
    .param {
      width: 25%;
      // height: 35PX;
      font-size: 14PX;
      display: flex;
      gap: 10PX 0;
      .label {
        width: auto;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14PX;
        color: $--color-text-secondary;
      }
      .value {
        width: auto;
        height: 100%;
        // border: 1px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 5PX;
      }
    }
    .btns {
      width: 100%;
      height: 40PX;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .chart {
    width: 100%;
    height: calc(100% - 200PX);
    // border: 1px solid green;
    padding: 0 10PX 0 10PX;
  }
}
// 设备管理页面样式
.device-part {
  background-color: $--color-white;
}
.device-filter-tree {
  .el-tree-node__content {
    padding-right: 18PX;
  }
}
.openatc-device {
  position: relative;
  // top: -15PX;    
  .tag-container {
    background-color: $--color-white;
    // position: absolute;
    // float: left;
    // max-width: 34%;
    // overflow: hidden;
  }
  .el-dropdown-link {
    margin-left: 5px;
    cursor: pointer;
    color: $--color-primary;
  }
  .devs-container{
    position: relative;
    top: -15px;
    .tabButton {
      float: left;
      padding-left: 20PX;
      .btn {
        float: left;
        min-width: 100PX;
        padding: 0PX 20PX;
        height: 40PX;
        line-height: 40PX;
        text-align: center;
        font-size: 16PX;
        font-weight: 400;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        cursor: pointer;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    }
    .filter-container {
      float: right;
      margin-top: 20PX;
      margin-right: 20PX;
      max-width: unset;
      .el-form-item {
        margin-bottom: 20PX;
        button, .el-input {
          float: left;
          margin-left: 10PX;
        }
      }
      .filters {
        float: left;
        margin-left: 4PX;
        margin-bottom: 20PX;
        .header-span {
          color: $--color-text-secondary;
          font-size: 14PX;
          font-weight: normal;
          font-stretch: normal;
        } 
      }
    }
  }
    .devs-table {
      padding: 0 20PX;
    .el-table {
        border: solid 1PX $--border-color-lighter;
      }
    }
    .dev-update {
      .el-form-item {
        margin-bottom: 15PX;
      }
      .el-dialog__footer {
        padding: 0 20PX 20PX 0;
      }
    }
  }
  .state-search {
    margin-left: 2PX;
  }
  // 用户管理页面样式
  .openatc-user {
  }
  // 角色管理页面、组织机构样式
 .openatc-organization {
    .el-dialog__body {
      padding: 20PX 20PX 20PX 0;
      .el-form-item {
        margin-bottom: 10PX;
      }
    }
    .el-dialog__footer {
      padding: 0 20PX 20PX 0;
    }
  }
  .viewDeviceDialog {
    .el-dialog__body { 
      padding: 20PX;
    }
  }
  .openatc-role {
    .el-dialog__body {
      padding: 20PX;
      .el-form-item {
        margin-bottom: 10PX;
      }
    }
    .el-dialog__footer {
      padding: 0 20PX 20PX 0;
    }
  }
  // 路线优化
  .routeOptimize {
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    // background-color: #f7f8fa;
    .el-dialog__header {
      padding: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid $--border-color-lighter;
    }
    .el-dialog__body {
      padding: 0;
    }
    .pattern-figure {
      .main-patternstatus {
        margin-top: unset !important;
      }
    }
    .funcs {
      width: 100%;
      height: 50PX;
      display: flex;
      border-bottom: solid 1px $--border-color-lighter;
      background-color: $--color-white;
      .title {
        width: 10%;
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: 15px;
        color: $--color-text-primary;
        font-size: 16PX;
        line-height: 40PX;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
      }
      .btnGroup{
        width: 100%;
        display: flex;
        margin-left: 15PX;
        margin-right: 15PX;
        .btn-left{
          width: 50%;
          display: flex;
          align-items: center;
          .filter {    
            width: 220PX;
            height: 100%;
            margin-right: 15PX;
            display: flex;
            align-items: center;
            .el-input-group__append {
              color: #FFFFFF;
              background-color: #299BCC;
              border-color:#299BCC;
              padding: 0 10PX;
              .el-icon-search {
                font-size: 18PX;
              }
            }
          }
        }
        .btn-right{
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .container {
      width: 100%;
      height: calc(100vh - 103PX);
      background-color: $--color-white;
      .el-aside {
        height: 100%;
        color: $--color-text-primary;
        border-right: solid 1px $--border-color-lighter;
        background-color: $--color-white;
        .openatc-planmanu {
          .el-menu {
            height: calc(100vh - 150PX);
            max-height: calc(100vh - 150PX);
            overflow-y: auto;
            border-right: none;
            .el-menu-item {
              height: 44px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .el-main {
        height: 100%;
        background-color: $--color-white;
        .main-container {
          border: 0px solid red;
          width: 100%;
          height: 90%;
          margin-top: 10px;
          margin-bottom: 10px;
          .panel-content {
            border: 0px solid green;
            width: 100%;
            height: 680px;
            display: flex;
            flex-direction: column;
            .el-table__expand-icon {
              // 修改展开箭头的样式
              .el-icon-arrow-right::before {
                font-size: 18px;
                color: $--color-text-primary;
              }
            }
            .route-filter-container {
              display: flex;
              justify-content: flex-start;
              flex-wrap: wrap;
              .filter {
                width: 20%;
                // border: 1px solid red;
                display: flex;
                padding: 0 0 8px 0;
                justify-content: flex-end;
                align-items: center;
                .header-span {
                  width: auto;
                  // border: 1px solid green;
                  display: flex;
                  justify-content: flex-end;
                  color: $--color-text-secondary;
                  font-size: 14PX;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 14PX;
                } 
              }
            }
            .table-container {
              .app-container {
                background-color: $--color-white;
              }
              .el-table__expand-icon {
                display: flex;
                align-items: center;
                .el-icon {
                  position: absolute;
                  left: 50%;
                  top: 34%;
                }
              }
            }
          }
        }
      }
    }
    .planExecute {
      .el-dialog__title {
        font-weight: bold;
      }
      .content {
        border: solid 1px $--border-color-lighter;
        .success {
          color: $--color-success;
        }
        .danger {
          color: $--color-danger;
        }
        .primary {
          cursor: pointer;
          color: $--color-primary;
        }
      }
      .footer {
        width: 100%;
        height: 55PX;
        padding: 0 15PX 0 15PX;
        display: flex;
        align-items: center;
        .checkbox {
          width: 25%;
          border: 0px solid red;
          display: flex;
          align-items: center;
        }
        .time {
          width: 35%;
          border: 0px solid red;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .time-content {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .button {
          width: 40%;
          font-size: 14PX;
          border: 0px solid red;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: 15PX;
          .downloadInfo {
            color: $--color-info
          }
        }
      }
    }
  }
  // 绿波协调页面样式
  .greenWaveOptimize {
    // margin-top: 15px;
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    .el-table__expand-icon {
      color: $--color-text-regular;
    }
    .el-aside {
      border-right: 1px solid $--border-color-light;
      height: calc(100vh - 53PX);
      color: $--color-text-primary;
      border-right: solid 1px $--border-color-lighter;
      background-color: $--color-white;
      .openatc-planmanu {
        .title {
          display: flex;
          align-items: center;
          height: 30px;
          margin-left: 15px;
          margin-top: 20px;
          margin-bottom: 20px;
          border: 0px solid red;
          color: $--color-text-primary;
          font-size: 18px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 0px;
        }
        .el-menu {
          border: 0px solid red;
          height: calc(100vh - 200px);
          max-height: calc(100vh - 200px);
          overflow-y: auto;
          border-right: none;
          .el-menu-item {
            height: 44px;
            display: flex;
            align-items: center;
          }
        }
        /* 蒙层样式 */
        .mask {
          position: fixed;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.5;
          z-index: 97;
        }
        /* 原生按钮样式修改 */
        .btnGroup {
          position: relative;
          border: 0px solid red;
          .addbtn {
            position: absolute;
          }
          button {
            cursor: pointer;
          }
        }
        /* 提示框相关 */
        .tipContent > div{
            float: left;
        }
        .tipContent div i {
          color: $--color-primary;
          font-size: 30px;
        }
        .tipContent .text {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 1px;
            color: $--color-primary;
            margin-left: 7px;
            line-height: 42px;
        }
        .tipContent .iconfont {
          color: $--color-primary;
        }
      }
      .addOptimize {
        .devs-table {
          .el-table {
            border: solid 1px $--border-color-lighter;
          }
        }
        .editDistance {
          .distanceContener {
            width:100%;
            height:500px;
            border: 1px solid $--border-color-lighter;
            .title {
              width:100%;
              height:40px;
              border-bottom: 1px solid $--border-color-lighter;
              display:flex;
              justify-content:space-around;
            }
          }
        }
      }
    }
    .el-main {
      height: calc(100vh - 73PX);
      background-color: $--color-white;
      // margin-top: 20px;
      // margin-left: 20px;
      // height: calc(100% - 0px);
      // width: calc(100% - 0px);
      border: 0PX solid yellow;
      .main-planContent {
        position: relative;
        border: 0px solid red;
        height: 100%;
        .sub-title {
          display: flex;
          align-items: center;
          height: 20px;
          // margin-left: 15px;
          // margin-top: 20px;
          // margin-bottom: 15px;
          // margin-top: 10px;
          border: 0px solid red;
          color: $--color-text-primary;
          font-size: 14px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 14px;
          letter-spacing: 0px;
        }
        .sub-main {
          border: 0px solid red;
          .app-container {
            background-color: $--color-white;
            border: 0px solid red;
          }
        }
      }
    }
  }
  .tipContent{
    .handicon {
      color: $--color-text-primary;
    }
  }
  .btnGroup .operate .el-dropdown-link {
    color: $--color-primary;
    cursor: pointer;
  }
  .openatc-planchart {
    height: 100%;
    .planchart-top {
        width: 100%;
        min-width: 1600PX;
        .el-select {
          width: 100PX;
        }
        .el-input {
          width: 100PX;
        }
      }
      .planchart-bottom {
        width: 100%;
        // min-width: 1600px;
      } 
      .chart-title  {
        text-align: center;
        font-size: 16PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0px;
        color: $--color-text-primary;
        // margin-top: 20PX;
        height: 40PX;
        // border: 1px solid red;
        display: flex;
        align-items: center;
        gap: 20PX 10PX;
        padding-top: 10PX;
        .title {
          width: 200PX;
          height: 100%;
          // padding-top: 20PX;
          padding-left: 20PX;
          // border: 1px solid red;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .direction-up, .direction-down {
          width: 560PX;
          height: 100%;
          // border: 1px solid red;
          display: flex;
          background-color: $--background-color-base;
          justify-content: space-between;
          padding: 10PX 20PX;
          gap: 20PX 0;
          .item {
            width: auto;
            height: 100%;
            // border: 1px solid green;
            display: flex;
            flex-shrink: 0;
            .label {
              width: auto;
              height: 100%;
              color: $--color-text-secondary;
              // border: 1px solid red;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              cursor: pointer;
              padding-right: 5PX;
              .line-up {
                width: 30PX;
                height: 10PX;
                background-color: #7bcb9b;
              }
              .line-down {
                width: 30PX;
                height: 10PX;
                background-color: #7bc7fd;
              }
              .line-up-selected {
                width: 30PX;
                height: 10PX;
                background-color: rgba(123, 203, 155, 0.4);
              }
              .line-down-selected {
                width: 30PX;
                height: 10PX;
                background-color: rgba(123, 199, 253, 0.4);
              }
            }
            .value {
              width: auto;
              height: 100%;
              color: $--color-text-primary;
              font-weight: bold;
              // border: 1px solid red;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
            .icon-jiantou {
              padding-left: 2PX;
              font-size: 10PX;
            }
          }
        }
        .direction-up, .direction-down {
          .number-up {
            transform: rotate(270deg);
            .icon-jiantou {
              color: #009d3b;
            }
          }
          .number-down {
            transform: rotate(90deg);
            .icon-jiantou {
              color: #df6e6e;
            }
          }
          .number-none {
            display: none;
          }
        }
        .switch-offset {
          width: 150PX;
          height: 100%;
          // padding-top: 20PX;
          padding-left: 5PX;
          // border: 1px solid red;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          gap: 2PX;
        }
      }
      .realtimechart, .planningchart {
        height: 330PX;
      }
      .echartsStyle {
        border:0px solid red;
        // float: left;
        // width: 1300px;
        // height: 700px;
        width: 90%;
        height: calc(100% - 40PX);
      }
      .realtimescheme, .planningscheme {
        background-color: $--color-white;
        height: 370PX;
      }
      .bar {
        width: 100%;
        height: 10PX;
        background-color: $--background-color-base;
      }
      .up-card {
        // margin-top: 100px;
        .el-card__header {
          padding: 10PX 20PX;
          border-bottom: 1PX solid $--color-white;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
      }
      .coordination-name {
        float: left;
        margin-top: 8PX;
        margin-left: 10PX;
        font-size: 14PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0px;
        color: $--color-text-secondary;
      }
      .coordination-select {
        float: left;
        margin-left: 10PX;
      }
      .text {
          font-size: 14PX;
        }
      
        .item {
          margin-bottom: 5PX;
          color: $--color-text-secondary;
        }
      
        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }
        .clearfix:after {
          clear: both
        }
        .box-card {
          width: 130PX;
          height: 141PX;
          background-color: $--color-black;
          border-radius: 4PX;
          border: solid 1PX $--border-color-lighter;
          .header-text {
            color: $--color-text-primary;
          }
        }
  }
  .addDeviceDrawer {
    height: 100%;
    position: relative;
    .btnGroup {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        padding: 0 16px;
        display: flex;
        align-items:center;
        .btn {
            width: 50%;
          }
      }
      .devs-container {
        padding: 0 20px;
        overflow: hidden;
      }
      .filter-container {
        float: right;
        width: 100%;
      }
      .devs-table {
        border: solid 1px $--border-color-lighter;
        overflow: auto;
        max-height: 590px;
      }
  }
  .openatc-greenwareoptimize-device {
    .devicePanel {
        border: solid 1px $--border-color-lighter;
      }
      .addbtn {
        padding: 0;
        width: 70PX;
        height: 32PX;
        text-align: center;
        float: right;
        line-height: 32PX;
        min-width: 66PX;
        margin-bottom: 7PX;
      }
  }
  .distancePanel {
    border: solid 1px $--border-color-lighter;
    .distanceTable .el-input-number {
        display: none
     }
     .distanceTable .current-row .el-input-number {
       display: block
     }
     .distanceTable .current-row .el-input-number+span {
       display: none
     }
  }
  .patternPanel {
    border: solid 1px $--border-color-lighter;
  }
  .phasePanel {
    border: solid 1px $--border-color-lighter;
    .XRDDir {
        float: left;
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }
  }
  .common-comp-chart {
    background-color: $--background-color-base;
  }
  .openatc-operation {
    height: 100%;
    width: 100%;
    button {
      white-space: nowrap;
      outline: 0;
      transition: 0.1s;
      font-size: 14PX;
      border-radius: 4PX;
      color: $--button-primary-font-color;
      background-color: $--color-primary;
      border-color: $--color-primary;
      cursor: pointer;
    }
    button:hover {
      color: $--button-primary-font-color;
      background-color: $--color-primary;
      border-color: $--color-primary;
      opacity: 0.8;
    }
    .charts {
      width: 100%;
      height: 90%;
    }
    // .analysis-charts  {
    //   // height: calc(100% - 120PX);
    //   // height: 90%;
    //   width: 100%;
    //   .charts {
    //     position: absolute;
    //     top: 134px;
    //     width: 100%;
    //     // height: 90%;
    //     // height: calc(100% - 120PX);
    //   }
    // }
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  // 基础数据统计页面样式
  .openatc-basicdata {
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  // 操作记录页面样式
  .openatc-operationrecord {
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  .openatc-grouplist{
    .atc-table {
      .el-table {
        margin-top: auto;
        width: 100%;
      }
    }
  }
  .gis-control {
    position: relative;
    .openatc-serviceroutekanban {
      width: 460PX;
      padding-top: unset !important;
      position: absolute;
      left: 0;
      top: 0;
      // height: calc(100vh - 100PX) !important;
      z-index: 999;
    }
    .openatc-gis {
      position: absolute;
      right: 0;
      width: calc(100% - 460PX);
      // height: calc(100vh - 100PX);
    }
  }
  .left-list {
    position: relative;
    // width: 460PX;
    height: 100%;
    .schadule-config-container {
      position: absolute;
      top: 10PX;
      left: 470PX;
      width: 350PX;
      height: 330PX;
      border-radius: 2PX;
      box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      // border: 1px solid red;
    }
    .schadule-config {
      width: 100%;
      height: 100%;
      background-color: $--color-white;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      padding: 20PX;
      .header {
        width: 100%;
        height: 20PX;
        // border: 1px solid red;
        // height: 50PX;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        color: $--color-text-regular;
        .title {
          color: $--color-text-primary;
          width: 95%;
          height: 100%;
          font-family: SourceHanSansCN-Medium;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          // line-height: 22PX;
          letter-spacing: 0PX;
        }
        .close {
          cursor: pointer;
          font-size: 24PX;
          width: auto;
          height: auto;
          margin: -15PX -15PX 0 0;
          color: $--color-info;
        }
      }
      .params {
        width: 100%;
        height: 260PX;
        // border: 1px solid red;
        .param {
          width: 100%;
          height: 35PX;
          font-size: 14PX;
          display: flex;
          margin: 10PX 0;
          .label {
            width: 30%;
            height: 100%;
            // border: 1px solid red;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 14PX;
            color: $--color-text-primary;
          }
          .value {
            width: 70%;
            height: 100%;
            // border: 1px solid red;
            display: flex;
            align-items: center;
            .el-input--mini {
              font-size: 14PX;
            }
            .el-tag {
              font-size: 14PX;
            }
          }
        }
        .btns {
          width: 100%;
          height: 40PX;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
      .btns {
        width: 100%;
        height: 40PX;
        display: flex;
        justify-content: flex-end;
      }
    }
    .icon-tiaodupeizhi {
      font-size: 14PX;
      color: $--color-primary;
      padding-right: 4PX;
      padding-left: 10PX;
    }
    .control-lists {
      .header {
        // position: relative;
        // top: 0;
        // left: 0;
        width: 100%;
        height: 40PX;
        // border: 1px solid red;
        display: flex;
        justify-content: space-between;
        .title {
          // margin: 0 0 15px 0 ;
          color: $--color-text-primary;
          width: 95%;
          height: 100%;
          // border: solid 1px red;
          font-family: SourceHanSansCN-Medium;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          line-height: 22PX;
          letter-spacing: 0PX;
          display: flex;
          justify-content: flex-start;
          padding: 20PX 0PX 10PX 20PX; 
          // color: #303133;
        }
        .close {
          // border: solid 1px red;
          cursor: pointer;
          font-size: 24PX;
          width: auto;
          height: auto;
          padding: 10PX 10PX 0 0;
          // margin: 5PX 5PX 0 0;
          // margin: -20PX -5PX 0 0;
          color: $--color-info;
        }
      }
    }
    .control-list {
      // .el-card__body {
      //   .info {
      //     width: 100%;
      //     height: 20PX;
      //     // border: 1px solid red;
      //     color: $--color-text-secondary;
      //     // padding-left: 20PX;
      //   }
      //   .main {
      //     // width: 500PX;
      //     height: 480PX;
      //     // padding: 10PX;
      //     // border: 1px solid red;
      //     background-color: $--color-white;
      //     overflow: hidden;
      //     .crossDirection-display {
      //       zoom: 1.2 !important;
      //       margin-top: -144PX;
      //     }
      //   }
      //   }
        width: 100%;
        height: 100%;
        background-color: $--color-white;
        box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
        border-radius: 2PX;
        border: solid 1px $--border-color-base;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .header {
          // position: relative;
          // top: 0;
          // left: 0;
          width: 100%;
          height: 40PX;
          // border: 1px solid red;
          display: flex;
          justify-content: space-between;
          .title {
            // margin: 0 0 15px 0 ;
            color: $--color-text-primary;
            width: 95%;
            height: 100%;
            // border: solid 1px red;
            font-family: SourceHanSansCN-Medium;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            line-height: 22PX;
            letter-spacing: 0PX;
            display: flex;
            justify-content: flex-start;
            padding: 20PX 0PX 10PX 20PX; 
            // color: #303133;
          }
          .close {
            // border: solid 1px red;
            cursor: pointer;
            font-size: 24PX;
            width: auto;
            height: auto;
            padding: 10PX 10PX 0 0;
            // margin: 5PX 5PX 0 0;
            // margin: -20PX -5PX 0 0;
            color: $--color-info;
          }
        }
        .content {
          position: relative;
          left: 0;
          width: 100%;
          height: calc(100% - 40PX);
          background-color: $--color-white;
          // border: 1px solid green;
          .content-config {
            width: 100%;
            height: 100%;
            // border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            .params {
              width: 100%;
              height: auto;
              // border: 1px solid red;
              padding-top: 15PX;
              padding-bottom: 15PX;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-start;
              .param {
                width: 200PX;
                height: 40PX;
                // border: 1px solid red;
                padding: 5PX;
                display: flex;
                flex-grow: 1;
                justify-content: flex-start;
                align-items: center;
                .label {
                  width: 85PX;
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  margin-right: 10PX;
                  font-size: 14PX;
                  color: $--color-text-primary;
                }
                .value {
                  width: 100PX;
                  font-size: 14PX;
                  justify-content: flex-end;
                  justify-content: center;
                  align-items: center;
                  .el-input--mini {
                    font-size: 14PX;
                  }
                  .el-input-number {
                    .el-input__inner {
                      text-align: left;
                    }
                  }
                }
              }
            }
            .info {
              width: 100%;
              height: 20PX;
              // border: 1px solid red;
              color: $--color-text-secondary;
              padding-left: 20PX;
              font-size: 12PX;
            }
            .main {
              width: 530PX;
              height: 530PX;
              padding: 10PX;
              // border: 1px solid red;
              background-color: $--color-white;
              // overflow: hidden;
              .intersection-map {
                background: #1e90c106;
                .crossDirection-display {
                  zoom: 1.0 !important;
                  margin-top: -100PX;
                }
              }
            }
            .bottom {
              width: 100%;
              height: auto;
              // border: 1px solid red;
              display: flex;
              justify-content: flex-end;
              align-items: flex-end;
              padding: 10PX 20PX 20PX 0;
            }
            .intersection-direction-selection {
              height: 100%;
            }
          }
        }
      }
    // }
    .box-card {
      // width: 460PX;
      // height: calc(100vh - 90PX);
      height: 100%;
      position: relative;
      .demo-ruleForm {
        .el-form-item {
          margin-bottom: 10PX;
        }
      }
      .tiops{
        font-size: 12PX;
        height: 40PX;
        display: flex;
        justify-content: space-between;
        // margin-right: 10PX;
        margin-bottom: 12PX;
        align-items: center;
        color: #909399;
        border-bottom: 1PX solid $--border-color-base;
        .el-button {
          padding: unset;
        }
        .el-button:hover {
          color: #299bcc !important;
        }
      }
      .btnGroup {
        position: absolute;
        bottom: 20PX;
        left: 0;
        width: 100%;
        padding: 0 20PX;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .block >>> .el-timeline-item__content {
        .card-div {
          margin-left: 30PX;
          margin-top: 10PX;
          width: 100% !important;
        }
      }
    }
  }
  // 组织机构页面样式
  // 勤务路线页面样式
  .openatc-serviceroute, .openatc-serviceroutekanban {
    .leaflet-bottom {
      z-index: 900;
      bottom: 0;
    }
    // padding-top: 15PX;
    // margin-top: 15px;
    height: calc(100vh - 53PX);
    background-color: $--background-color-base;
    .el-table .highLight-row {
      background: $--color-bg;
    }
    .el-table .el-table__body tr.current-row > td.el-table__cell{
      background-color: $--color-bg !important;
    }
    .onePageTable {
      padding-top: unset;
    }
    .tree-card {
      width: 380PX;
      height: calc(100% - 90PX);
      border-radius: 2PX;
      padding-top: 20PX !important;
      box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
      position: absolute;
      left: 470PX;
      top: 10PX;
      .title-top {
        min-height: 10PX;
      }
      .tree-list {
        max-height: calc(100% - 60PX);
        overflow: auto;
      }
      .title {
        font-size: 18PX;
        font-weight: bold;
      }
      .close {
        position: absolute;
        font-size: 24PX;
        color: #909399;
        padding: unset;
        z-index: 999;
        width: 30PX;
        height: 30PX;
        right: 10PX;
        top: 10PX;
      }
    }
    .funcs {
      width: 100%;
      background-color: $--color-white;
      height: 50PX;
      // border-bottom: 1px solid $--border-color-base;
      display: flex;
      align-items: center;
      justify-content: space-between;
      i {
        font-size: 14PX;
        // margin-left: 10PX;
        // color: #299BCC;
      }
      .title {
        width: 10%;
        display: flex;
        align-items: center;
        height: 100%;
        // margin-left: 15PX;
        color: $--color-text-primary;
        font-size: 16PX;
        line-height: 40PX;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
      }
      .btnGroup{
        width: 90%;
        display: flex;
        margin-right: 15px;
        // border: 1px solid red;
        .btn-left{
          width: 50%;
          display: flex;
          align-items: center;
        }
        .btn-right{
          // border: 1px solid red;
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .container {
      width: 100%;
      height: calc(100vh - 103PX);
      .el-aside {
        height: 100%;
        color: $--color-text-primary;
        border-right: solid 1px $--border-color-lighter;
        background-color: $--color-white;
        .serviceroute-planmenu {
          height: 100%;
          // border: 1px solid red;
          .el-menu {
            // height: calc(100vh - 220PX);
            height: calc(100vh - 150PX);
            max-height: calc(100vh - 150PX);
            overflow-y: auto;
            border-right: none;
            .el-menu-item {
              height: 44px;
              display: flex;
              align-items: center;
            }
          }
          /* 原生按钮样式修改 */
          .btnGroup button {
            cursor: pointer;
          }
          /* 提示框相关 */
          .tipContent > div {
            float: left;
          }
          .tipContent div i {
            color: $--color-primary;
            font-size: 30px;
          }
          .tipContent .text {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 14px;
            letter-spacing: 1px;
            color: $--color-primary;
            margin-left: 7px;
            line-height: 42px;
          }
          .tipContent .iconfont {
            color: $--color-primary;
          }
        }
      }
      .el-main {
        height: 100%;
        background-color: $--color-white;
        .serviceroute-plancontent {
          position: relative;
          height: 100%;
        }
      }
    }
    .gis-duteRoute {
      width: 361PX;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      // box-shadow: 0PX 0PX 7PX 0PX rgba(0, 32, 60, 0.19);
      border-left: solid 1px $--border-color-lighter;
    }
  }
  // 公用组件
  .batchExecute {
    .el-dialog {
      box-shadow: 0PX 0PX 8PX 1PX rgba(0, 32, 60, 0.3);
    }
    .el-dialog__title {
      font-weight: bold;
    }
    .el-dialog__body {
      padding: 20PX 20PX;
    }
    .content {
      border: solid 1PX $--border-color-lighter;
      .success {
        color: $--color-success;
      }
      .danger {
        color: $--color-danger;
      }
      .primary {
        cursor: pointer;
        color: $--color-primary;
      }
    }
    .footer {
      width: 100%;
      height: 40PX;
      margin-top: 20PX;
      border: 0px solid red;;
      display: flex;
      .checkbox {
        width: 25%;
        border: 0px solid red;
        display: flex;
        align-items: center;
      }
      .time {
        width: 35%;
        border: 0px solid red;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .time-content {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .button {
        width: 40%;
        border: 0px solid red;
        display: flex;
        justify-content: flex-end;
        .el-button {
          font-size: 14PX;
        }
      }
    }
  }
  .serviceroute-pattern {
    border: solid 1px $--border-color-lighter;
    .pattern-figure {
        position: fixed;
        width: 39%;
        bottom: 40px;
      }
      .pattern-status {
        display: inline;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #303133;
      }
      .pattern-explain {
        float: right;
      }
      .dir-class {
        width: 100%;
        height: 100%;
        // background: rgb(217, 236, 255);
      }
  }
  .serviceroute-device {
    .devicePanel {
        border: solid 1px $--border-color-lighter;
      }
      .addbtn {
        padding: 0;
        width: 12.5%;
        height: 40px;
        text-align: center;
        float: right;
        line-height: 40px;
        min-width: 66px;
        margin-bottom: 7px;
      }
  }
  .serviceroute-addDeviceDrawer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 10px;
    overflow: visible;
    pointer-events: all;
    .btnGroup {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        padding: 0 16px;
        display: flex;
        align-items: center;
        .btn {
            width: 50%;
        }
      }
      .devs-container {
        padding: 0 20px;
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
      }
      .filter-container {
        float: right;
        width: 100%;
      }
      .devs-table {
        border: solid 1px $--border-color-lighter;
        overflow: auto;
        max-height: 590px;
      }
  }
  .serviceroute-routeCard { 
    width: 100%;
    .btn-bottom {
      float: right;
      margin-top: -5px;
      margin-right: 15px;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      border-radius: 4px;
      // min-height: 36px;
    }
    .grid-content-label {
      color: $--color-text-secondary;
    }
    .el-card__header, .el-card__body {
      padding: 14PX !important;
      background-color: #1e90c106;
    }
  }
  // 头部样式
.versioninfo {
    .el-dialog__headerbtn .el-dialog__close {
        color: $--color-white;
    }
    .el-dialog__wrapper .el-dialog__headerbtn {
      top: 10PX;
      right: 10PX;
      font-size: 18PX;
      color: #fff;
      .el-icon-close {
        color: #fff !important;
      }
    }
    .el-dialog__header {
        padding: 50PX 20PX;
        height: 109PX;
        background-color: $--color-primary;
        border-radius: 4PX 4PX 0PX 0PX;
    }
    .el-dialog__body {
      padding: 20PX 20PX;
    }
    .el-dialog__title {
        width: 291PX;
        height: 38PX;
        margin-top: 40PX;
        font-size: 36PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0PX;
        color: #fff;
    }
    .banben {
        font-size: 14PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0PX;
        color: $--color-text-regular;
    }
    .divider {
        // width: 483PX;
        height: 1PX;
        margin-top: 15PX;
        background-color: $--border-color-light;
    }
    .open-source {
        margin-top: 25PX;
        font-size: 14PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        letter-spacing: 0PX;
        color: $--color-primary;
    }
    .agreement {
        cursor: pointer;
    }
}
.bottomTime {
  position: fixed;
  font-size: 14PX;
  color: $--color-text-regular;
  bottom:20PX;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5PX;
}
// 登录页面样式
.login-container {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $--background-color-base;
    .login-text {
      letter-spacing: 4PX; 
      font-weight: bold;
    }
    .switch-language {
        cursor:pointer;
        margin-top: 20px;
        margin-right: 20px;
        float: right;
      }
      .el-input {
        display: inline-block;
        height: 46PX;
        width: 85%;
        input {
          background: $--color-white;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 10PX 5PX 12PX 5PX;
          color: $--color-text-primary;
          height: 46PX;
          font-size: 15PX;
          &:-webkit-autofill {
            -webkit-text-fill-color: rgb(0, 0, 0) !important;
          }
          .el-input__inner {
            -webkit-appearance: none;
            background-color: $--color-white;
            background-image: none;
            border-radius: 4px;
            border: 0px solid #dcdfe6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: $--color-text-regular;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
          }
        }
      }
      .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: $--color-white;
        border-radius: 5px;
        color: $--color-primary;
      }
      .login-form {
        position: absolute;
        left: 0;
        right: 0;
        //width: 33%;
        width: 20%;
        min-width: 400px;
        padding: 35px 35px 15px 35px;
        margin: 120px auto;
        .custom-msg {
          color: $--color-text-secondary;
          font-size: 12PX;
        }
      }
      .tips {
        font-size: 14px;
        color: $--color-text-secondary;
        margin-bottom: 10px;
        span {
          &:first-of-type {
            margin-right: 16px;
          }
        }
      }
      .svg-container {
        padding: 3PX 0PX 0PX 11PX;
        color: $--color-primary;
        vertical-align: middle;
        width: 30PX;
        display: inline-block;
        &_login {
          padding-left: 8PX !important;
          position: relative;
          top: 2PX;
          left: -1PX;
        }
        .login-user {
          width: 24PX;
          height: 24PX;
          position: relative;
          top: 2PX;
        }
        .login-password {
          width: 18PX;
          height: 18PX;
        }
      }
      .title {
        font-size: 26px;
        font-weight: 400;
        color: $--color-primary;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
        font-stretch: normal;
      }
      .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: $--color-info;
        cursor: pointer;
        user-select: none;
      }
}
.modify-passwd {
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $--color-primary;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
    font-stretch: normal;
  }
  .subtitle {
    color: $--color-text-secondary;
    margin-left:-70px;
  }
  .passCheck {
    color: $--color-text-secondary;
  }
}
// licenseInfo关于样式
.licenseInfo {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
      height: 70%;
      overflow: hidden;
      .el-dialog__body {
          padding: 20PX 20PX;
          color: $--color-text-regular;
          font-size: 14PX;
          word-break: break-all;
          position: absolute;
          left: 0;
          top: 70PX;
          bottom: 30PX;
          z-index: 1;
          overflow: hidden;
          overflow-y: auto;
      }
  }
  .el-dialog__title {
    font-size: 20PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-white;
  }
  .el-dialog__headerbtn {
    color: $--color-white;
  }
  .el-dialog__header {
    padding: 30PX 10PX 10PX;
    height: 69PX;
    background-color: $--color-primary;
    border-radius: 4PX 4PX 0PX 0PX;
  }
}
#app .adminEdge {
  border-top: 1px solid $--border-color-base;
  height: calc(100% - 62PX);
}
.tagsList .highlightTag .el-icon-close{
  color: $--color-white !important;
}
.tagsList .highlightTag .el-icon-close:hover {
  background-color: $--border-color-extra-light;
  color: $--color-primary !important;
}
.tagsList .normalTag .el-icon-close{
  color: $--color-primary !important;
}
.tagsList .normalTag .el-icon-close:hover {
  background-color: $--color-primary;
  color: $--color-white !important;
}
.tagsList {
  // height: 84px;
  padding: 16PX 0 16PX 20PX;
  box-sizing: border-box;
  .el-tag {
    cursor: pointer;
    margin-left: 3px;
    font-size: 14PX;
  }
  .el-tag--mini {
    min-width: 50px;
    height: 26px;
    padding: 0 5px;
    line-height: 26px;
    text-align: center;
  }
  .toListBtn {
    // height: 24PX;
    // line-height: 22PX;
    // padding: 0 8PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    margin-bottom: 4PX;
  }
  .highlightTag {
    background-color: $--color-primary;
    border-color: $--color-primary;
    color: #FFFFFF;
  }
}
.configDrawer .el-drawer__header {
  text-align: left;
  color: $--color-text-primary;
  font-size: 18PX;
  font-weight: bold;
}
.configDrawer .el-drawer__body {
  padding: 0 16px 70px 16px;
}
.configDrawer {
  position: relative;
  .el-drawer__close-btn {
    font-size: 24PX; 
    color: $--color-info;
    position: relative;
    top: -10PX;
    right: -10PX;
  }
  .btnGroup {
    position: absolute;
    bottom: 30px;
    right: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    .btn {
      width: 50%;
    }
  }
  .edit-text {
    display: flex;
    align-items: center;
    margin-left: 15PX;
    margin-top: 20PX;
    margin-bottom: 20PX;
    border: 0px solid red;
    color: $--color-text-primary;
    font-size: 18PX;
    font-weight: bold;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0px;
    .iconfont {
      font-size: 14PX;
      color: #299BCC;
      margin-right: 5PX;
    }
  }
  .name-input {
    margin: 5px 0 5px 0;
  }
}
.route-optimize-config {
  .el-drawer__body {
    padding: 0 20PX 70PX 20PX;
  }
  .name-input {
    width: 48%;
  }
  .edit-text {
    font-size: 14PX;
    font-weight: normal;
    color: $--color-text-secondary;
    margin-left: 0;
    .label {
      margin-right: 5PX;
    }
  }
}
$space-width: 18px;
.ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: $space-width;
  height: 14px;
  &::before {
    content: "";
  }
}
.processContainer {
  width: 100%;
  height: 100%;
}
table td {
  line-height: 26px;
}

.tree-ctrl {
  position: relative;
  cursor: pointer;
  color: $--color-primary;
  margin-left: -$space-width;
}
// Navbar样式
.openatc-main {
  font-family: digital-7;
  float:left;
  padding-left: 16PX;
  padding-right: 26PX;
  height: 52PX;
  line-height: 52PX;
  font-size: 22PX;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 2PX;
  // color: $--color-text-primary;
  color: #fff;
}
.openatc-line {
  float:left;
  margin-left: 20PX;
  margin-top: 19PX;
  width: 1PX;
  height: 14PX;
  background-color: $--color-text-placeholder;
}
.openatc-menu {
  float:left;
  font-size: 14PX;
  font-weight: normal;
  font-stretch: normal;
  height: 52PX;
  line-height: 52PX;
  letter-spacing: 0px;
  color: $--color-primary;
  .el-menu-item {
    height: 52PX;
    line-height: 52PX;
    float: left;
    font-size: 15PX;
    .el-dropdown {
      font-size: 15PX;
    }
  }
}
.el-dropdown-menu {
  .iconfont {
    line-height: 36PX;
  }
}
.el-menu-demo  {
    background-image: linear-gradient(90deg, 
      #1a8dbe 0%, 
      #299bcc 100%), 
    linear-gradient(
      #299bcc, 
      #299bcc);
    background-blend-mode: normal, 
      normal;
    box-shadow: 0px 6px 11px 0px 
      rgba(0, 64, 125, 0.07);
    color: #fff;
    border-bottom: none !important;
  .el-dropdown-menu {
    width: 228px;
    .el-dropdown-menu__item {
      color: $--color-text-regular;
    }
    .label {
      font-size: 12px;
      color: $--color-text-secondary;
      margin-bottom: 12px;
    }
    .content {
      font-size: 12px;
      color: $--color-text-primary;
    }
    .user {
      padding: 0 24px;
      .name {
        font-size: 20px;
        color: $--color-primary;
        margin-bottom: 14px;
        margin-top: 13px;
      }
    }
    .message {
      padding: 16px 24px 0 24px;
      margin-bottom: 10px;
      .email {
        margin-top: 22px;
      }
      .content {
        font-size: 14px;
      }
    }
  }
  .el-menu-item {
    color: #fff;
    padding: 0 15PX;
    i {
      color: #fff;
    }
    .el-dropdown {
      color: #fff;
    }
    .el-dropdown-link {
      i, span {
        float: left;
      }
      .menu-icon--right {
        line-height: 52PX;
        margin-left: 0;
      }
    }
  }
  .el-menu-item.is-active {
    background-color: rgba(9, 31, 64, 0.3) !important;
    color: #fff;
    font-weight: bold;
    .el-dropdown {
      color: #fff;
      font-weight: bold;
    }
  }
  .el-menu-item:focus, .el-menu-item:hover {
    background-color: rgba(9,31,64, 0.15);
    // color: #299bcc;
    // i {
    //   color: #299bcc;
    // }
    // .el-dropdown {
    //   color: #299bcc;
    // }
  }
  .el-menu-item:not(.is-disabled):hover {
    color: #fff !important;
  }
  }
  .user-name {
    width: 58PX;
    height: 21PX;
    margin-top: 10PX;
    font-size: 20PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-primary;
  }
  .organization {
    margin-top: 8PX;
  }
  .real-name {
    margin-top: 14PX;
    margin-bottom: 10PX;
  }
  .laber-name {
    // width: 48px;
    height: 13PX;
    font-size: 12PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-secondary;
  }
  .laber-value {
    margin-top: 5PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .switch-language {
      cursor: pointer;
      margin-top: 17PX;
      margin-right: 30PX;
      float: right;
    }
  .row-bg {
    padding: 5PX 0;
  }
    .el-menu--horizontal {
      border-bottom: solid 1px $--border-color-base!important;
  }
  .alarm-message {
    cursor: pointer;
    margin-top: 15PX;
    margin-right: 30PX;
    float: right;
    color: $--color-text-secondary;
  }
  .menu-icon--right {
    margin-left: -5PX;
  }
  //tooltip样式
  .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
    border-top-color: $--background-color-base;
  }
  .atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: $--background-color-base;
  }
  .atooltip {
    background: $--background-color-base !important;
    border-color: $--color-text-primary !important;
  }

//交通流
.dev-traffic-detail {
  .el-dialog {
    // height: calc(100%);
    height: calc(100% - 16vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }
  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .el-dialog__title {
      position: absolute;
      left: 24PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
  }
  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }
  .trafficDetector {
    // height: 100%;
    // height: calc(100vh - 50PX);
    height: calc(100vh - 20vh);
    display: flex;
    flex-direction: column;
    .title {
      line-height: 60PX;
      font-family: MicrosoftYaHei;
      font-size: 18PX;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0PX;
      color: $--color-text-primary;
    }
    .top {
      background: $--color-white;
      height: 50%;
      width: 100%;
      float: left;
      margin-bottom: 20PX;
      // overflow: hidden;
      .choosePanel {
        position: relative;
        left: 120PX;
        z-index: 999;
        height: 24PX;
      }
    }
    .select {
      position: absolute;
      z-index: 999;
      width: 107PX;
      height: 29PX;
      .el-input__inner {
        font-size: 14PX;
      }
    }
    .lefttop {
      width: 100%;
      height: 100%;
      background: $--color-white;
      padding: 0 20PX;
      box-sizing: border-box;
      box-shadow: 0PX 0PX 4PX 0PX
      rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
    }
    .chart1 {
      width: 100%;
      height: 75%;
    }
    .chart2 {
      width: 100%;
      height: calc(100% - 70PX);
    }
    .bottom {
      height: 50%;
      width: 100%;
      float: left;
    }
    .bottom-left {
      float: left;
      width: calc(70% - 20PX);
      height:100%;
      background: $--color-white;
      padding: 0 20PX;
      box-sizing: border-box;
      box-shadow: 0PX 0PX 4PX 0PX
          rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
    }
    .bottom-right {
      float: right;
      width: 30%;
      height: 100%;
      background: $--color-white;
      padding: 0 20PX;
      box-shadow: 0PX 0PX 4PX 0PX
          rgba(0, 32, 60, 0.06);
      border-radius: 4PX;
      box-sizing: border-box;
    }
    .chartright {
      width: 100%;
      height: calc(100% - 70PX);
    }
    .choosePanel {
      position: absolute;
      z-index: 999;
    }
    .btn {
      float: left;
      min-width: 60PX;
      height: 26PX;
      background-color: $--color-white;
      border: solid 1PX $--color-primary;
      color: $--color-primary;
      border-radius: 0;
      padding: 0 6PX;
      text-align: center;
      line-height: 26PX;
      font-size: 14PX;
      margin-right: 6PX;
      cursor: pointer;
    }
    .btn:hover {
      background-color: $--color-primary;
      color: #fff;
    }
    .btnFocus {
      background-color: $--color-primary;
      border: solid 1PX $--color-primary;
      color: #fff;
    }
  }
}

// 历史路口统计

.dev-intersection-detail {
  .el-dialog {
    height: calc(100% - 30vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }

  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
      .el-input__inner {
        height: 36PX;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }

  .trafficStrength {
    height: 100%;
    .el-loading-spinner{
      font-size: 50PX;
      }
    .left {
      border: 0PX solid red;
      height: 100%;
      width: 100%;
      float: left;
        .title {
            padding-top: 25PX;
            margin-bottom: 20PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
      }
      .lefttop {
        width: 100%;
        height: 52%;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX 
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .leftbottom {
        width: 100%;
        height: calc(100% - 52% - 16PX);
        margin-top: 16PX;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .right {
        height: 100%;
        width: calc(31% - 15PX);
        float: left;
        margin-left: 15PX;
      }

      .chart1 {
        width: 100%;
        height: calc(100% - 100PX);
      }
      .chart2 {
        width: 100%;
        height: calc(100% - 70PX);
      }
      .choosePanel {
        position: relative;
        z-index: 999;
        height: 24PX;
      }
      .btn {
        float: left;
        min-width: 60PX;
        height: 26PX;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        border-radius: 0;
        padding: 0 6PX;
        text-align: center;
        line-height: 26PX;
        font-size: 12PX;
        margin-right: 6PX;
        cursor: pointer;
      }
      .btn:hover {
        background-color: $--color-primary;
        color: #fff;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    .strengthPanel {
        width: 100%;
        background: $--color-white;
        height: 52%;
        padding: 0 20PX;
        .title {
          padding-top: 25PX;
          margin-bottom: 20PX;
          font-family: MicrosoftYaHei;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0PX;
          color: $--color-text-primary;
        }
        .chart {
          width: 100%;
          height: 79%;
        }
      }
    .periodicPanel{
      margin-top: 16PX;
      width: 100%;
      height: calc(100% - 52% - 16PX);
        background: $--color-white;
        padding: 0 20PX;
        box-shadow: 0PX 0PX 4PX 0PX 
            rgba(0, 32, 60, 0.06);
        border-radius: 4PX;
        box-sizing: border-box;
        .title {
            padding-top: 25PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
        .chart {
            width: 100%;
          height: 86.4%;
        }
    }
  }
} 
// 方案统计

.dev-pattern-detail {
  .el-dialog {
    height: calc(100% - 20vh);
    .el-dialog__body {
      height: 100%;
      padding: 20PX;
      background: $--background-color-base;
      .content {
        height: 100%;
      }
    }
  }

  .el-dialog__header {
    position: relative;
    height: 60PX;
    padding: 0 11PX 0 11PX;
    .tittle {
      float: left;
      margin-left: 13PX;
      font-size: 20PX;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: $--color-text-primary;
      line-height: 60PX;
    }
    .timepicker {
      position: absolute;
      right: 72PX;
      top: 11PX;
      .el-date-editor .el-range-separator {
        line-height: 29PX;
      }
      .el-date-editor .el-range-input {
        color: $--color-text-primary;
        background-color: $--color-white;
      }
      .el-date-editor.el-input__inner {
        height: 36PX;
        float: left;
      }
    }
    .searchbtn {
      width: 70PX;
      height: 36PX;
      line-height: 36PX;
      padding: 0;
      text-align: center;
      float: left;
      margin-left: 5PX;
    }
    .crossName {
      float: left;
      margin-right: 8PX;
      height: 36PX;
      line-height: 36PX;
      i {
          color: #999;
          margin-right: 6PX;
          font-size: 20PX;
      }
      span {
          color: $--color-text-regular;
          float: left;
          font-size: 14PX;
      }
      .lukouIcon {
          display: inline-block;
          width: 22PX;
          height: 22PX;
          border-radius: 50%;
          color: $--color-text-regular;
          text-align: center;
          line-height: 22PX;
          margin-top: 7PX;
          margin-right: 1PX;
          .iconfont {
              font-size: 14PX;
              margin-right: 0 !important;
          }
      }
    }
  }

  .trafficStrength {
    height: 100%;
    .el-loading-spinner{
      font-size: 50PX;
      }
    .left {
        height: 100%;
        width: 69%;
        float: left;
          .title {
              padding-top: 25PX;
              margin-bottom: 20PX;
              font-family: MicrosoftYaHei;
              font-size: 18PX;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0PX;
              color: $--color-text-primary;
          }
      }
      .lefttop {
        width: 100%;
        height: 52%;
          background: $--color-white;
          padding: 0 20PX;
          box-sizing: border-box;
          box-shadow: 0PX 0PX 4PX 0PX 
              rgba(0, 32, 60, 0.06);
          border-radius: 4PX;
      }
      .leftbottom {
        width: 100%;
        height: calc(100% - 52% - 16PX);
        margin-top: 16PX;
        background: $--color-white;
        padding: 0 20PX;
        padding-right: 0;
        box-sizing: border-box;
        box-shadow: 0PX 0PX 4PX 0PX
            rgba(0, 32, 60, 0.06);
        border-radius: 4PX;
        position: relative;
      }
      .right {
        height: 100%;
        width: calc(31% - 15PX);
        float: left;
        margin-left: 15PX;
      }

      .chart1 {
        width: 100%;
        height: calc(100% - 100PX);
      }
      .chart2 {
        width: 100%;
        height: calc(100% - 90PX);
        top: 20PX;
        left: -20PX;
      }
      .choosePanel {
        position: relative;
        z-index: 999;
        height: 24PX;
      }
      .btn {
        float: left;
        min-width: 60PX;
        height: 26PX;
        background-color: $--color-white;
        border: solid 1PX $--color-primary;
        color: $--color-primary;
        border-radius: 0;
        padding: 0 6PX;
        text-align: center;
        line-height: 26PX;
        font-size: 12PX;
        margin-right: 6PX;
        cursor: pointer;
      }
      .btn:hover {
        background-color: $--color-primary;
        color: #fff;
      }
      .btnFocus {
        background-color: $--color-primary;
        border: solid 1PX $--color-primary;
        color: #fff;
      }
    .strengthPanel {
        width: 100%;
        background: $--color-white;
        height: 100%;
        padding: 0 20PX;
        .title {
          padding-top: 25PX;
          margin-bottom: 20PX;
          font-family: MicrosoftYaHei;
          font-size: 18PX;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0PX;
          color: $--color-text-primary;
        }
        .chart {
          width: 100%;
          height: 79%;
        }
      }
    .periodicPanel{
      margin-top: 16PX;
      width: 100%;
      height: calc(100% - 52% - 16PX);
        background: $--color-white;
        padding: 0 20PX;
        box-shadow: 0PX 0PX 4PX 0PX
            rgba(0, 32, 60, 0.06);
        border-radius: 4PX;
        box-sizing: border-box;
        .title {
            padding-top: 25PX;
            font-family: MicrosoftYaHei;
            font-size: 18PX;
            font-weight: bold;
            font-stretch: normal;
            letter-spacing: 0PX;
            color: $--color-text-primary;
        }
        .chart {
            width: 100%;
          height: 86.4%;
        }
    }
    .tooltiplabel {
      display: inline-block;
      width: 60PX;
      margin-right: 14PX;
      line-height: 26PX;
    }
  }
} 
// 操作记录json弹窗
.recordJsonModal {
  width: 900px;
  pre {
    max-height: 880px;
    overflow: auto;
  }
}
// 故障记录
.faultPage {
  // position: relative; // 父元素定位会影响子元素的offset高度计算
  height: 100%;
  .tabButton {
    position: absolute;
    left: 20PX;
    top: 88PX;
    .btn {
      float: left;
      // min-width: 100PX;
      padding: 0px 14PX;
      height: 40PX;
      line-height: 40PX;
      // text-align: center;
      font-size: 16PX;
      // font-weight: 400;
      background-color: $--color-white;
      border: solid 1PX $--color-primary;
      color: $--color-primary;
      cursor: pointer;
      margin-right: 0;
    }
    .btnFocus {
      background-color: $--color-primary;
      border: solid 1px $--color-primary;
      color: #fff;
    }
  }
  .openatc-historyfaultrecord,.openatc-realtimefaultrecord {
    .filter-container {
      float: right;
      padding-left: 0PX;
      margin-bottom: 10PX;
      max-width: calc(100% - 240PX);
    }
    .inner-table {
      margin: 0 20PX;
      border: solid 1PX $--border-color-lighter;
    }
  }
  // .openatc-realtimefaultrecord {
  //   padding-top: 80PX;
  // }
}  //故障记录页面样式
.openatc-faultrecord {
  .el-range-editor .el-range-input {
    background-color: $--color-white;
  }
  .el-date-editor .el-range-separator {
    padding: 0
  }
  .el-range-editor--small .el-range-separator {
    line-height: 32PX;
  }
}